ものすごく久しぶりに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-! と表示されます。