nginxでwebsocket

2014-01-12T00:00:00+00:00 JavaScript nginx Node.js

nginx1.3から正式サポートされたらしいのでやった事無かった為やってみただけ。前回のAndroidでsocket.ioで使ったのをちょいと修正して使う

nginx1.3のインストール

検証マシンに入ってるnginxが1.2系だったので、nginx公式のPPAを使えば1.3系以降なのもインストール出来る模様

sudo add-apt-repository ppa:nginx/stable
sudo apt-get update

# 既に入ってるnginxをアップグレードする。もしくはnginxを一回消してから再度入れるとか
sudo apt-get upgrade

クライアント

前回、socket.io.js辺りなやつはコピペして使うって書いたけど、socket.ioなサーバー上で/socket.io/socket.io.jsなURLで利用できるっぽい

<html>
  <head>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
  </head>
  <body>
    <input type="text" id="message" />
    <input type="button" id="send_btn" value="send" />
    <div id="messages"></div>
    <script type="text/javascript">
(function(undefined) {
  "use strict";

  var messages = document.querySelector("#messages");

  var socket = io.connect("http://server.name/");
  socket.on("connect", function() {
    socket.on("message", function(data) {
      var elm = document.createElement("div");
      elm.innerText = data;

      messages.appendChild(elm);
    });

    document.querySelector("#send_btn").addEventListener("click", function() {
      socket.send(document.querySelector("#message").value);
    });
  });
})();
    </script>
  </body>
</html>

サーバー側

var express = require("express");

var app = express();
app.configure(function() {
  // クライアント側にあるファイルを静的ファイルで読み込めるように?
  app.use(express.static(__dirname + "/../client"));
});

var server = require("http").createServer(app);
server.listen(3000);

var io = require("socket.io").listen(server);
io.sockets.on("connection", function(socket) {
  socket.on("message", function(data) {
    socket.broadcast.send(data);
  });
});

nginx.conf

upstream socketio {
    server 127.0.0.1:3000;
}

server {
    server_name server.name;

    location / {
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_pass http://socketio;
    }
}

最小限で、proxy_Set_headerでUpgradeとConnectionを指定しておけば良いっぽい。んまぁ詳しくは以下参考にすりゃ良いっぽい

で外部からnginxにアクセスしても問題無いかどうかをAndroidのブラウザでサーバーにアクセスして、PCから入力したデータが表示されるかの検証してみた所だと

参考: http://blog.geta6.net/post/45741693575/nginx-1-3-14-websocket-proxy

SVGで(棒+線)チャートを描画してみる Androidでsocket.io