気ままにIoTメモ

Iotに関わること関わらないこと備忘録

Socket.IOでデバイス⇔サーバー⇔ブラウザ通信

Socket.IOで以下のような1対1のリアルタイム通信をしてみました。

f:id:htn_hs:20161119053741p:plain
(※今回はラズパイではなくMac上のターミナルでテストしています)

重要なコードだけ記載しておきます。

バイス側はSocket.IOでサーバ・クライアント間通信とほぼ同じ。 jsonデータを送信するように変更しています。

var settings = require('./settings'),
    io = require('socket.io-client');

var url = settings.host + ':' + settings.port;

var socket = io.connect('http://' + url);

socket.on('connect', function() {
    socket.on('emit_from_server', function(msg) {
        socket.json.emit('emit_from_device', {
            msg: msg + ' -> device ',
            name: 'device'
        });
    });
    socket.json.emit('emit_from_device', {
        msg: 'initialize',
        name: 'device'
    });
});
console.log('device connecting...');

サーバー側からデータを受信した時、 " -> device" を加えてサーバー側に送信しています。 socket.ioのidを設定するために最初だけメッセージを送信しています。

サーバー側は参考リンクに詳細が書かれています。

expressのサーバーのポート:3000
socketサーバーのポート:8888

まだ1対1でしかテストしていませんが、Socket.IOで送信先を指定してデータを送信しています。 (io.toでJSONがうまく送信できなかったのでもう少し調べる必要あり)

var http = require('http');

var server = http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type':'text/html'});
    res.end('server connected');
});
var io = require('socket.io').listen(server);

server.listen(8888);

var client_id;
var device_id;
io.sockets.on('connection', function (socket) {

    socket.on('emit_from_device', function(data) {
        device_id = socket.id;

        io.to(client_id).emit('emit_from_server', data.msg + '-> server ');
    });
    socket.on('emit_from_client', function(data) {
        client_id = socket.id;

        io.to(device_id).emit('emit_from_server', data.msg + '-> server ');
    });
});

クライアント側からデータを受信した時、 " -> server" を加えてデバイス側に送信しています。

実際にはjadeテンプレートで記述しましたが、生成後のHTMLは次の通りです。

<!DOCTYPE html>
<html>
<head>
<title>Express</title>
<link rel="stylesheet" href="/stylesheets/style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<ul></ul>
<script type="text/javascript" src="http://localhost:8888/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket;
$(function(){
  socket = io.connect("http://localhost:8888");

  setInterval(function() {
    socket.json.emit('emit_from_client', {
      msg: 'client',
      name: 'client'
    });
  }, 1000);

  socket.on('emit_from_server', function (data) {
    var li = $('<li>').text(data + '-> client');
    $('ul').append(li);
  });
});
</script>
</body>
</html>

1秒間隔で"client"を送信、サーバー側からデータの受信時に" -> client"を加えてliタグで表示しています。

実行結果 f:id:htn_hs:20161119053837p:plain

クライアント側からデバイス側までデータを往復させることができました。

iot_lab/04_dev_cli_server at master · hsgwa/iot_lab · GitHub

参考

Express×socket.ioを使ってwebsocketで遊ぼう~第1話~ - Qiita

【Node.js】Socket.IO@1.0を読んでみた【WebSocket】 | FiS Project

Socket.IO — Rooms and Namespaces

Sending message to a specific ID in Socket.IO 1.0 - Stack Overflow

socket.io(node.js)のserver -> clienetの送信まとめ - thinking now...

HTMLのテンプレート的なの (Jade記法) - Qiita