Express + Socket.ioを使って静的なHTMLをホスティングしつつ、サーバとブラウザ間をリアルタイムに通信する 📡

f:id:kimizuka:20210720235415p:plain

ものすごく久しぶりにExpress + Socket.ioでウェブサイトを作ったので、手順をメモしておきます。
※ Node.js v14.15.0、yarn 1.22.5 で作成

必要なパッケージをインストール

yarn add express socket.io

app.jsを作成

const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);

app.use('/', express.static(`${ __dirname }/public`));

io.on('connection', () => {
  console.log('yahho-!');
});

http.listen(3000, '0.0.0.0');

public/index.htmlを作成

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>socket.io</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.3/socket.io.min.js"></script>
</head>
<body>
  <script>
    const socket = io.connect();
  </script>
</body>
</html>

package.jsonを編集

{
  "name": "socket.io",
  "version": "1.0.0",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  },
  "license": "MIT",
  "dependencies": {
    "express": "^4.17.1",
    "socket.io": "^4.1.3"
  }
}

これで、ブラウザ → サーバの通信はOKです。
yarn start を実行し、ブラウザで localhost:3000 にアクセスすれば、サーバ側のログに yahho-! と表示されるはずです。

次に、サーバ → ブラウザの通信も実装してみましょう。

app.jsを編集

const express = require('express');
const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);

app.use('/', express.static(`${ __dirname }/public`));

io.on('connection', () => {
  console.log('yahho-!');
  io.emit('yamabiko', 'yahho-!'); // 追加
});

http.listen(3000, '0.0.0.0');

public/index.htmlを編集

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>socket.io</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.3/socket.io.min.js"></script>
</head>
<body>
  <script>
    const socket = io.connect();

    socket.on('yamabiko', (msg) => {
      console.log(msg);
    });
  </script>
</body>
</html>

これで、ブラウザ → サーバ → ブラウザと通信するようになりました。
yarn start を実行し、ブラウザで localhost:3000 にアクセスすれば、サーバ側のログに yahho-! と表示され、その後ブラウザ側のログにも yahho-! と表示されるはずです。

サーバ → ブラウザの通信は一対多で実装しているので、ブラウザでページを開けば開くほど、もともと開いていたブラウザに yahho-! と表示されます。