Node.jsでSocket.ioをたまに使うのですが、書き方を忘れます。何度も思い出す時間がもったいないので、最低限よく使うパターンを記録に残します。
Node.jsサーバーのコード
Expressを利用して、Webサーバーを立てています。
Socket.ioでHTMLから受信したメッセージをログに表示します。
その直後「返信」とHTMLに送り返します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
const TCP_PORT = 3000, DIRECTORY = 'app', express = require('express'), app = express(), http = require('http').Server(app), io = require('socket.io')(http); const init = () => { app.use(express.static(DIRECTORY)); http.listen(TCP_PORT, () => { console.log('サーバーを起動'); }); setIo(); }, //ソケットIO設定 setIo = () => { io.on('connection', (socket) => { socket.on('btn', (val) => { console.log(val); io.sockets.emit('text', '返信'); }); }); }; init(); |
HTMLのコード
ボタンを押すと「送信」というメッセージがNode.jsサーバーに送られます。
送信が成功し、返信を受け取った場合、「返信」とブラウザのコンソールログに表示されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>socket.io送受信</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.0/socket.io.js"></script> </head> <body> <header> <h1>socket.io送受信</h1> <button type="button" id="btn">ボタン</button> </header> <main> </main> <script> const socket = io(); const init = () => { setSocket(); setBtn(); const setSocket = () => { socket.on('text', (val) => { console.log(val); //'返信'と表示 }); }; const setBtn = () => { $('#btn').on('click', function(){ socket.emit('btn', '送信'); }); }; init(); </script> </body> </html> |
以上。
基本パターンは、この記載を見て思い出すことにします。