Socket.ioの超基礎編 - のぐそんブログ

expressとSocket.ioを使う

サーバー側の知識が限りなく0に近いオジサンですが、 Socket.ioを使って、サーバーとクライアントで双方向通信をやってみます。

モジュールをインストール。

npm install socket.io --save

下記が最低限のコードです。上手く行けば'接続されました'のメッセージが表示されます。

◎サーバー側のコード

var express = require('express');
var app = express();
var server = require('http').createServer(app);
var socketIO = require("socket.io");
var io = socketIO.listen(server);

app.get(`/`, (req, res) function{
  res.sendFile(__dirname + '/index.html');
});

io.sockets.on("connection", function (socket) {
    console.log('接続されました')
});

◎フロント側のコード

<html>
    <head>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        var socket = io.connect();
    </script>
    <head>
    <body>
    </body>
</html>

Socket.IOでフロントからサーバーにデータを送る

フロント側からemit関数でイベントを発火します。サーバー側ではon関数で、イベントキャッチします。

◎フロント側のコード

 var socket = io.connect();
 socket.emit("eventName", { fuga: "fuga" });

◎サーバー側のコード

io.sockets.on("connection", function (socket) { 
    socket.on("eventName", function(dataFromClient) {
        // 「fuga」という文字列がターミナルに出力される。
        console.log(dataFromClient.fuga);
    });
});

Socket.IOでサーバーからフロントにデータを送る

サーバー側からデータを送る場合も基本的には同じです。 emitで送って、onでキャッチします。

◎フロント側のコード

 var socket = io.connect();
 socket.on("eventName",  function(dataFromClient) {
    // 「fuga」という文字列がターミナルに出力される。
    console.log(dataFromClient.fuga);
 });

◎サーバー側のコード

接続元だけに送信する場合はこちら。

io.sockets.on("connection", function (socket) { 
    socket. emit("eventName", { fuga: "fuga" });
});

接続元以外に送信する場合はこちら。

socket.broadcast.emit("eventName", { fuga: "fuga" });

まとめ

双方向通信という言葉が難しそうでしたが、やってみると今回書いたレベルのことならそこまで難しくありませんでした。

トリガーとリスナーの関係もフロント側のコードを書く際もよくでてくるので、すんなり理解できました。

機能てきにはこれを利用すれば、色々おもしろいことができそうです。