みかづきブログ・カスタム

基本的にはちょちょいのほいです。

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

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

JavaScript

こちらの記事のES Modulesバージョンです。
※ Node.js v20.10.0、yarn 1.22.22 で作成

blog.kimizuka.org

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

yarn add express socket.io

app.mjsを作成

import { createServer } from 'node:http';
import path from 'node:path';
import url from 'node:url';
import express from 'express';
import { Server } from 'socket.io';

const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
const app = express();
const http = createServer(app);
const io = new Server(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://cdn.socket.io/4.7.5/socket.io.min.js"></script>
</head>
<body>
  <script>
    const socket = io.connect();

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

package.jsonを編集

{
  "name": "socket-io",
  "version": "1.0.0",
  "main": "app.mjs",
  "scripts": {
    "start": "node app.mjs"
  },
  "license": "MIT",
  "dependencies": {
    "express": "^4.19.2",
    "socket.io": "^4.7.5"
  }
}

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

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