Unity＋Node.js＋Webscoket＋WebGLで通信してみる

Tweet

Unityでwebsocketによる通信のテストをした。
WebGLを利用する場合、それ以外で通信を行う時と勝手が違ったので記録として残しておく
その手順を書いておく。なお今回はsocket.ioは使わない。

まずサーバー側。
nodejs,websocketでチャット
こちらのapp.jsを参考にさせていただいた。webページの表示は必要ないのでhttpがらみの処理は省いて極力コンパクトにした。
ライブラリはwsを使う。
app.jsと同じフォルダでインストールコマンド

var WebSocketServer = require('ws').Server;
var port = process.env.PORT || 3000;

// setting ws
var wss = new WebSocketServer({port:port});
console.log("websocket server created");

var connections = [];

// 接続開始
wss.on('connection', function(ws) {
  console.log('websocket connection open');

  connections.push(ws);
  /**
   * ws受信時
   * メッセージを受けたら、時間とuserIdを付与して、接続している全員にsend
   */
  ws.on('message', function(data) {
    console.log('クライアントから次のメッセージを受け取りました：' + data);	
    wss.clients.forEach(function(client) {
      client.send("ユーザー" + (connections.indexOf(ws) + 1) +"からのメッセージです。" + data);
    });
  });

  // クローズ
  ws.on('close', function() {
    console.log('websocket connection close');
  });
});

で

で実行。できたできた。
コマンドライン上で動くクライアントを作ってテストするべきなんだろうけど私はせっかちなので省略していきなりUnityに飛ぶ。
できなかったときに確かめりゃいいんだよ！！！

でUnity(クライアント)側。
Simple Web Sockets for Unity WebGLというアセットを利用する。
Simple Web Sockets for Unity WebGL

アセットをインポートする際は、Exampleもついでにインポートする。このExampleで通信テストをしてみる。
EchoTestシーンを開き、EchoTest.csを編集する。
編集する箇所は以下の部分のみ

//省略
    WebScoket w = new WebScoket(new Uri("ws://xxx.xxx.xx.x:3000"));
//省略

xの部分は各自IPアドレスを。

これで行けるんでねーのと思い実行。いけてそう行けてそう。
・・・・と思ったらwebGLでビルドしてブラウザから見ると受信だけできていない。
と、アセットの配布先を見るとコメント欄に修正の仕方が乗っているではないか。すごーい。

Pluginsフォルダの中にあるWebSocket.jslibをテキストエディタで開き、30行目か31行目あたりにある閉じ括弧に以下の処理を追記する。

else if(typeof e.data === "string") {
var reader = new FileReader();
reader.addEventListener("loadend", function() {
var array = new Uint8Array(reader.result);
socket.messages.push(array);
});
var blob = new Blob([e.data]);
reader.readAsArrayBuffer(blob);
}

サーバ起動してビルドしたファイルをブラウザで表示したら無事通信ができた。

Tweet