🐢

Socket.IOで始めるリアルタイム双方向通信

2022/12/06に公開

AWS

（※過去のブログ記事をZennにアップしています。）

リアルタイムかつ双方向通信が可能なWebSocketを、気軽に利用できるSocket.IOを使ってみました。

WebSocketは、リアルタイムかつ双方向通信を実現するプロトコルです。WebSocket通信では、コネクション確立時にHTTPからWebSocketへプロトコルを切り替えます。このWebSocketを簡単に利用することができるライブラリSocket.IOを使って、簡単なチャットツールを作ってみます。

https://socket.io/

まずは、Node.jsでWebサーバを構築するためにExpressをインストールします。

npm install express@4

https://expressjs.com/ja/

次にSocket.IOをインストールします。

npm install --save socket.io

JavaScriptでWebサーバの処理を記述します。

▼ server.js

const path = require("path");
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require('socket.io');
const io = new Server(server);

app.use(express.static(path.join(__dirname, 'public')));

// 接続したユーザーに対するイベント
io.on('connection', (socket) => {

  // chat messageイベントを受信
  socket.on('chat message', (msg) => {
  
    // ユーザーにchat messageイベントでメッセージを送信
    io.emit('chat message', msg);
    
  });
  
  socket.on('disconnect', () => {
  });
});

// ポート3000番でサーバを起動します。
server.listen(3000, () => {
  console.log('listening on *:3000');
});

HTMLを作成して、データの送受信処理を記述します。

▼ public/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Socket.IOで始めるリアルタイム双方向通信</title>
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
    <input id="input" autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io.min.js"></script>
<script>
    var socket = io();

    var messages = document.getElementById('messages');
    var form = document.getElementById('form');
    var input = document.getElementById('input');

    form.addEventListener('submit', function(e) {
        e.preventDefault();
        if (input.value) {
            socket.emit('chat message', input.value);
            input.value = '';
        }
    });

    socket.on('chat message', function(msg) {
        var item = document.createElement('li');
        item.textContent = msg;
        messages.appendChild(item);
        window.scrollTo(0, document.body.scrollHeight);
    });
</script>
</body>
</html>

クライアント側のSocket.IOのJavascriptをnode_modules/socket.io/client-dist/socket.io.min.jsより、HTMLから読み込むためにpublicディレクトリにコピペしてください。

全体のディレクトリ構造は以下のようになります。

├── node_modules
├── package-lock.json
├── package.json
├── public
│   ├── index.html
│   └── socket.io.min.js
└── server.js

Node.jsでserver.jsを実行し、Webサーバアプリケーションを起動します。

node server.js

ブラウザを2つ立ち上げて、http://localhost:3000/にアクセスします。

これで、WebSocketを使って、リアルタイムで双方向通信ができるようになりました。テキストフィールドに入力したテキストが、リアルタイムに反映されるかと思います。

例えばAWS上で、Node.jsで実行することで、Webコンテンツとして公開することができます。

まとめ

今回、リアルタイムかつ双方向通信が可能なWebSocketを、気軽に利用できるSocket.IOを使ってみました。メッセージのやり取りだけでなく、JSONなどのデータをやり取りすれば、オンラインゲームなどのコンテンツを作ることも可能になります。ただし、WebSocketで通信できるデータは、テキストデータのみとなりますので、ビデオチャットのような仕組みには、WebRTCを利用する必要があります。

Node.jsを使うことで、クライアントサイドもサーバサイドもJavascript記述することが出来るようになり、エンジニアにとっては、コンテンツ作成に集中できる環境になるかと思います。

まとめ

Discussion