https://note.com/npaka/n/nf35299512e4dを参考に改変
これも参考？ https://apidog.com/jp/blog/nodejs-websocket/
server.js
let ws=require('ws');
var server = new ws.Server({port:5001});
server.on('connection', ws => {
ws.on('message', (data) => { (data)でうける！
console.log(`Received: ${data}`); ここ重要！
server.clients.forEach(client => {
client.send(`Received: ${data}`); ここも重要！
});
});
ws.on('close', () => {
console.log('close');
});
});
index.html :: http-server and browse localhost:8080/index.html etcでconsole監視
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 送信ボタン -->
<input type="button" id="send_button"" value="送信">
<script>
// WebSocketのクライアントの生成
let ws = new WebSocket('ws://localhost:5001')
// 接続時に呼ばれる
ws.addEventListener('open', e => {
console.log('open')
})
// サーバからのデータ受信時に呼ばれる
ws.addEventListener('message', e => {
console.log(e.data)
})
// ボタンクリック時に呼ばれる
document.getElementById('send_button').addEventListener('click', e => {
// サーバへのデータ送信
ws.send('hello')
})
</script>
</body>
</html>
-----------------------------------------------------------
https://qiita.com/kbys-fumi/items/a62dfa6f8baf81ff9cc5
【初心者向け】リアルタイム通信を実現するための手段をまとめる
polling,long-polling(comet),server-sent-events,wobsoketの４種類！最後がポピュラー
このほかにwebRTC,esp-nowなどもあった もちろんfirebaseも！
---------serverをnode.jsとして、clientはhtmlに埋め込む（wsモジュール編）------------------
https://www.tohoho-web.com/ex/websocket.html#sample_with_ws
ws と Socket.IO の違い wsのほうがビルトインで簡便
WebSocket はブラウザに標準で組み込まれていますが、Socket.IO はライブラリを読み込む必要があります。ws は WebSocket を利用しますが、Socket.IO は WebSocket 以外に AJAX Long Polling、AJAX MultipartStream などにも対応します。ws が全クライアントに送信するにはクライアントの台数分ループを回す必要がありますが、Socket.IO は1回の操作で全クライアントに送信することができます。ws はデータをそのまま送信しますが、Socket.IO は socket.emit() の第1引数にイベント名をつけて送信することができます。
------------server/client both nodejs version ------------server---------
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
// server クライアントから接続される場合トリガーされる
server.on('connection', (socket) => {
console.log('Client connected');
// 受信メッセージを処理
socket.on('message', (data) => {
console.log(`Received: ${data}`);
// ここでメッセージの処理ロジックを追加
});
// 接続中止
socket.on('close', () => {
console.log('Client disconnected');
});
});
ーーーーー client ーーーーーー
const WebSocket = require("ws");
const readline = require('readline');
// WebSocketクライアントを作成してサーバーに接続
const socket = new WebSocket('ws://localhost:8080');
// 接続ができた時にトリガーされる
socket.onopen = () => {
console.log('Connected to server');
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout,
});
// コマンドラインを利用してメッセージをサーバーに送信
rl.on('line', (input) => {
// 入力したメッセージを送信
socket.send(input);
});
};
// サーバーのメッセージが受信された時にトリガーされる
socket.onmessage = (event) => {
console.log(`Received: ${event.data}`);
};
// 接続中止
socket.onclose = () => {
console.log('Connection closed');
};
-------今の今まで知らなかった Server-Sent Events を使って---------------------------------------------
以下はhttps://qiita.com/y-okamon/items/6a913402e4b545c9324eより
-------------server-sent-event server using express ---------------------------------------------]
const express = require('express');
const app = express();
app.use(express.static('public'));
app.get('/subscribe', (req, res) => {
res.writeHead(200, {
'Content-Type': 'text/event-stream', // SSE を使うために `text/event-stream` を指定する
'Connection': 'keep-alive', // 接続を開いたままにする
'Cache-Control': 'no-cache' // キャッシュ処理をしない
});
const intervalId = setInterval(() => {
// 送信したいメッセージ（データ）は「data:」の後に書く
// 「\n\n」がメッセージの区切りになる
// 今回はデバイスから何らかの値（計測値）をプッシュしているイメージ
const device = { name: 'device-A-1234', value: Math.floor(Math.random() * 100) };
res.write(`data: ${JSON.stringify(device)}\n\n`);
}, 3000);
req.on('close', () => {
clearInterval(intervalId);
res.end();
});
});
app.listen(3000, () => console.log('Server listening: http://localhost:3000'));
------------------------index.html------------
