WebSocketは何度も扱ってきましたが、最近JavaScriptを多く使うことから、nodeを使ったServerPush を試してみました。
クライアント
|
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 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Multi WebSocket Client</title> <style> body { font-family: Arial, sans-serif; padding: 20px; } .container { display: flex; gap: 20px; } .box { width: 300px; } .message-box { border: 1px solid #ddd; padding: 10px; width: 100%; height: 200px; overflow-y: auto; background: #f9f9f9; } h3 { text-align: center; } </style> </head> <body> <h2>WebSocket Client</h2> <div class="container"> <div class="box"> <h3>Server 1 Messages</h3> <div id="messages1" class="message-box"></div> </div> <div class="box"> <h3>Server 2 Messages</h3> <div id="messages2" class="message-box"></div> </div> </div> <script> // サーバー1 (ポート8765) const socket1 = new WebSocket("ws://localhost:8765"); const messagesDiv1 = document.getElementById("messages1"); socket1.onopen = () => { console.log("Connected to Server 1"); socket1.send("Hello Server 1!"); }; socket1.onmessage = (event) => { const message = document.createElement("div"); message.textContent = event.data; messagesDiv1.appendChild(message); messagesDiv1.scrollTop = messagesDiv1.scrollHeight; // 自動スクロール }; socket1.onclose = () => { console.log("Disconnected from Server 1"); }; // サーバー2 (ポート8766) const socket2 = new WebSocket("ws://localhost:8766"); const messagesDiv2 = document.getElementById("messages2"); socket2.onopen = () => { console.log("Connected to Server 2"); socket2.send("Hello Server 2!"); }; socket2.onmessage = (event) => { const message = document.createElement("div"); message.textContent = event.data; messagesDiv2.appendChild(message); messagesDiv2.scrollTop = messagesDiv2.scrollHeight; // 自動スクロール }; socket2.onclose = () => { console.log("Disconnected from Server 2"); }; </script> </body> </html> |
Server1
|
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 |
const WebSocket = require("ws"); const wss = new WebSocket.Server({ port: 8765 }); wss.on("connection", (ws) => { console.log("Client connected to Server 1"); ws.on("message", (message) => { console.log(`Received on Server 1: ${message}`); }); ws.on("close", () => { console.log("Client disconnected from Server 1"); }); }); // 5秒ごとにメッセージをプッシュ setInterval(() => { const message = "Server 1 Push: Hello!"; console.log(`Sending from Server 1: ${message}`); wss.clients.forEach((client) => { if (client.readyState === WebSocket.OPEN) { client.send(message); } }); }, 5000); console.log("WebSocket Server 1 running on ws://localhost:8765"); |
Server2
|
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 |
const WebSocket = require("ws"); const wss = new WebSocket.Server({ port: 8766 }); wss.on("connection", (ws) => { console.log("Client connected to Server 2"); ws.on("message", (message) => { console.log(`Received on Server 2: ${message}`); }); ws.on("close", () => { console.log("Client disconnected from Server 2"); }); }); // 3秒ごとにメッセージをプッシュ setInterval(() => { const message = "Server 2 Push: Hi!"; console.log(`Sending from Server 2: ${message}`); wss.clients.forEach((client) => { if (client.readyState === WebSocket.OPEN) { client.send(message); } }); }, 3000); console.log("WebSocket Server 2 running on ws://localhost:8766"); |
実行画面
複数のサーバからのメッセージを同時に受けるデモです。
最近はChatGPTを積極的に使いますが、AIでプログラマの仕事を奪われるか、もっと言えばプログラマに限らず人間の仕事を奪うのか、という議論に、そうではないことを感じるようになってきました。
仕事の効率を上げるだけで、なくなることはないと。効率は10倍にも100倍にもなりますが、それは元がゼロでないからです。もともとスキルがゼロであれば、AIは役にたたないでしょう。