一例です。
前準備
前提・環境
- node.js: v10.16.0（async/awaitをサポートしている程度のバージョン）
- npm: v6.14.2（上のnode.jsとマッチするバージョンであればOK）
- windows 10 64bit
※ async/awaitは簡易化のために使用してるだけなので、必須ではないです。
ディレクトリ構造
[ルートフォルダ]
|- public
|- index.html
|- utils
|- getLocalIp.js
|- server.js
|- …その他package.json等
依存モジュールのインストール
npm i node-static ws
サーバー側
/server.js
const{createServer}=require("http");const{Server:FileServer}=require("node-static");const{Server:WebSocketServer}=require("ws");constgetLocalIp=require("./utils/getLocalIp");constPORT_NUM=8080;(async()=>{// ローカルipアドレス取得consthost=awaitgetLocalIp().catch((err)=>{throwerr;});// httpサーバー立ち上げconstfileServer=newFileServer(`${__dirname}/public`);constserver=createServer((request,response)=>{request.addListener("end",function(){fileServer.serve(request,response);}).resume();});// websocketサーバー立ち上げ（兼用）constwsServer=newWebSocketServer({server:server,});// クライアントとの接続確立後wsServer.on("connection",(ws)=>{ws.on("message",(message)=>{console.log("Received: "+message);if(message==="hello"){ws.send("hello from server!");}});});// サーバーリッスンserver.listen(PORT_NUM,host);server.on("listening",()=>{// 準備完了でコンソールにURL表示constaddressInfo=server.address();console.log(`http://${addressInfo.address}:${addressInfo.port}`);});})();/utils/getLocalIp.js
/**
* ローカルipアドレスを取得。非同期
* @see https://stackoverflow.com/a/9542157
*/module.exports=function(){returnnewPromise((resolve,reject)=>{require("dns").lookup(require("os").hostname(),(error,address)=>{if(error){reject(error);return;}resolve(address);});});};クライアント側
/public/index.html
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Websocket sample</title></head><h1>Websocket sample</h1><body><script>// URLがそのままwsとのコネクション用アドレスになるconst{host,pathname,protocol}=window.location;constwsProtocol=protocol==="http:"?"ws://":"wss://";constaddress=wsProtocol+host+pathname;constsocket=newwindow.WebSocket(address);// サーバーからのデータsocket.onmessage=(res)=>{if(typeofres.data==='string'){alert(`Message from server: ${res.data}`)}};// コネクション確立後socket.onopen=()=>{// メッセージ送ってみるsocket.send('hello')}</script></body></html>サーバー起動
node server.jsで起動して、ターミナルに表示されるURLにアクセスするとalertでメッセージが表示される…はず。
参考
- https://stackoverflow.com/questions/14273978/integrating-websockets-with-a-standard-http-server
- https://www.npmjs.com/package/websocket#server-example
- VScode Live Serverのgithub（ホットリロードの仕組みにwebsocketを使用、インジェクトされるコードを参考にしました）