azureサーバーでwebsocket（socket.io）を動かす

azureサーバーでsocket.io使おうとしたらnode.js込みで色々大変だったので記録

１環境

azure web apps
node.js(v4.0.0)
socket.io(v1.3.5)
とりあえず最小？環境で

２azureサーバー

アプリケーション設定でwebソケットをオンにする

３デプロイするファイルの準備

サーバーにデプロイするフォルダのルートに
app.js(最初にこのファイルが読み込まれるっぽい。)
index.html(app.jsで読み込む場合)
web.config(以下のように用意)

web.config

<?xml version="1.0" encoding="utf-8"?>
<!--
     This configuration file is required if iisnode is used to run node processes behind
     IIS or IIS Express.  For more information, visit:
 
     https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->
 
<configuration>
  <system.webServer>
    <!-- Visit http://blogs.msdn.com/b/windowsazure/archive/2013/11/14/introduction-to-websockets-on-windows-azure-web-sites.aspx for more information on WebSocket support -->
    <webSocket enabled="false" />
    <handlers>
      <!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->
      <add name="iisnode" path="server.js" verb="*" modules="iisnode"/>
    </handlers>
    <rewrite>
      <rules>
        <!-- Do not interfere with requests for node-inspector debugging -->
        <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
          <match url="^server.js\/debug[\/]?" />
        </rule>
 
        <!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
        <rule name="StaticContent">
          <action type="Rewrite" url="public{REQUEST_URI}"/>
        </rule>
 
        <!-- All other URLs are mapped to the node.js site entry point -->
        <rule name="DynamicContent">
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
          </conditions>
          <action type="Rewrite" url="server.js"/>
        </rule>
      </rules>
    </rewrite>
 
    <!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
    <security>
      <requestFiltering>
        <hiddenSegments>
          <remove segment="bin"/>
        </hiddenSegments>
      </requestFiltering>
    </security>
 
    <!-- Make sure error responses are left untouched -->
    <httpErrors existingResponse="PassThrough" />
 
    <!--
      You can control how Node is hosted within IIS using the following options:
        * watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
        * node_env: will be propagated to node as NODE_ENV environment variable
        * debuggingEnabled - controls whether the built-in debugger is enabled
 
      See https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config for a full list of options
    -->
    <!--<iisnode watchedFiles="web.config;*.js"/>-->
  </system.webServer>
</configuration>

参照:http://www.hanselman.com/blog/EnablingWebsocketsForSocketioNodeAppsOnMicrosoftAzure.aspx

どうやらIISが動いて邪魔するみたいなのでそれを無視して、node.jsを動かせ的な感じ？らしい
(これがなくてもnode.jsは動く。あくまでwebsocketを使う場合)

今回はこちらのソースを改変したもので、チャットサーバーを起動してみる。

app.js

var fs = require('fs');
var port = process.env.PORT || 8000;
var server = require('http').createServer(function(req,res){
  res.writeHead(200,{'Content-Type':'text/html'});
  var output = fs.readFileSync('./index.html','utf-8');
  res.end(output);
}).listen(port);
var io = require('socket.io').listen(server);

var userHash = {};

io.sockets.on('connection',function(socket){

  socket.on('connected',function(name){
    var msg = name + 'が入室しました';
    userHash[socket.id] = name;
    io.sockets.emit('publish',{value:msg});
    console.log('connected');
  });

  socket.on('publish',function(data){
    io.sockets.emit('publish',{value:data.value});
  });

  socket.on('disconnect',function(){
    if(userHash[socket.id]){
    var msg = userHash[socket.id] + 'が退出しました';
    delete userHash[socket.id];
    io.sockets.emit('publish',{value:msg});
    }
  });
});

改変点としては
var port = process.env.PORT || 8000
デプロイした環境ではprocess.env.PORTが動いて勝手にどうにかしてくれるらしい。
ローカル環境では勝手に8000が動くようになってるので、ここは各自自分のポートにすればおk
ついでにfs.readFileSync();には動かしたいファイルのパスを入力
./は現在のディレクトリ、一応

index.html

<html>
<head>
	<meta charset='utf-8'>
	<title>socket.io</title>
</head>
<body>
	<input type='text' id='msg_input' style='width:200px;'/>
	<button onclick='publishMessage();'>ツイート</button>
	<div id='msg'></div>
	<script src='./socket.io/socket.io.js'></script>
	<script type='text/javascript'>

		var socketio = io();

		socketio.on('connected',function(name){});
		socketio.on('publish',function(data){addMessage(data.value);});
		socketio.on('disconnect',function(){});

		function start(name){
			socketio.emit('connected',name);
		}

		function publishMessage(){
			var textInput = document.getElementById('msg_input');
			var msg = '[' + myName + ']' + textInput.value;
			socketio.emit('publish',{value:'hage'});
			textInput.value = '';
		}

		function addMessage(msg){
			var domMeg = document.createElement('div');
			domMeg.innerHTML = new Date().toLocaleTimeString() + ' ' + msg;
			msgArea.appendChild(domMeg);
		}

		var msgArea = document.getElementById('msg');
		var myName = Math.floor(Math.random() * 100) + 'さん';
		addMessage('あなたは' + myName + 'として入室しました');
		start(myName);
		</script>
	</body>
	</html>

こちらの改変点は
var socket.io = io();
とりあえずこうすればローカルでもazureでも動く

４最後に

デプロイに関しては少々長ったらしいのでこちら参照

何か間違いがあればお願いします