wssプロトコルを使用したwebsocketサーバーを構築してみる。

サーバーにnode.jsをインストールしましたので、wssプロトコルを使用したwebsocketサーバーとクライアントを構築してみました。

ただしクライアントは送信側と受信側をそれぞれ別々のページにします。なんのことはない、ただ1ページで行なっていた作業を送信側と受信側の2ページに分けるだけのことです。

以下はイメージ図です。

websocketサーバー with wssプロトコル

var fs = require('fs');
var ws = require('websocket.io');
var https = require('https');
var port = 8080;
var opts = {
  // SSL証明書と秘密鍵を準備する
  key: fs.readFileSync('./server.pem').toString(),
  cert: fs.readFileSync('./server.crt').toString()
};

var ssl_server = https.createServer(opts, function(req, res) {
  res.end();
});

var server = ws.attach(ssl_server);

// クライアントからの接続イベントを処理
server.on('connection', function(socket) {

  // クライアントからのメッセージ受信したとき
  socket.on('message', function(data) {

    console.log('data');

    // 受信したメッセージを全てのクライアントに送信する
    server.clients.forEach(function(client) {
      client.send(data);
    });
  });

  // クライアントが切断したとき
  socket.on('disconnect', function(){
    console.log('connection disconnect');
  });

  // 通信がクローズしたとき
  socket.on('close', function(){
    console.log('connection close');
  });

  // エラーが発生したとき
  socket.on('error', function(err){
    console.log(err);
  });
});


// サーバーを起動し続ける
ssl_server.listen(port, function() {
  console.log('Listening on ' + port);
});

wssプロトコルを使用する際には、SSL証明書とサーバーの秘密鍵が必要です。また受信したメッセージをすべてのクライアントに送信する場合、server.clients.forEach をする必要があります。client.send(data); だけを記述してもメッセージは飛びませんでした。それから、現在サーバーがエラーで停止する現象が出ています。server.clients.forEach でのエラーっぽいです。対処方法ご存知の方は教えてください。

クライアント・送信側

function sendws(){
  jQuery(function($) {
    var socket;
    socket = new WebSocket('wss://www.example.com:8080');
    var socketdata;
    socketdata = new Object();

/*
 *  socketデータ送信準備
*/

    // socketデータ送信
    socket.onopen = function(){ socket.send(JSON.stringify(socketdata)); };
  });
}

socketデータをJSON形式にして送るやり方は省略しています。WebSocketオブジェクトを作成時、wssを指定するのとサーバー側で記述したポート番号を忘れずに。

クライアント・受信側

jQuery(function($) {
  var socket;
  socket = new WebSocket('wss://www.example.com:8080');

  // サーバーに接続したとき
  socket.onopen = function(msg) { 
    $('#status').text('online');
  };

  // サーバーからデータを受信したとき
  socket.onmessage = function(msg) {
    console.log(msg.data);

    var jmsg = $.parseJSON(msg.data);
/*
* socketデータ受信・表示
*/
  };

  // サーバーから切断したとき
  socket.onclose = function(msg) { $('#status').text('offline'); };

});

サーバーへ接続・切断時にstatusにonlineかofflineを表示させるようにしています。websocketでJSONデータを受け取っています。表示方法は省略しています。

参考にさせて頂いたサイト

Node.jsとWebSocket.IOでチャットアプリを作る | mawatari.jp