Node.js と ws でシンプルな WebSocketサーバー＋ Node.js v22 でフラグなしで使える WebSocket #JavaScript

はじめに

以前から利用している「ws」と、Node.js v22 でフラグなしで使えるようになった WebSocket を組み合わせる話です。

ws

以下の ws は WebSocketサーバーを準備するのに使います。

●ws - npm
　https://www.npmjs.com/package/ws

Node.js v22 で WebSocket利用

Node.js v22 でフラグなしで使える WebSocket は、以下に書かれているものです。

●Node.js — Node.js 22 is now available!
　https://nodejs.org/en/blog/announcements/v22-release-announce#websocket

ブラウザと同様に、WebSocketサーバーに接続するクライアントを、簡単にプログラム内で使えるようになりました。

実際に試す

WebSocketサーバーを用意する

まずは WebSocketサーバーを用意します。

ws を npmコマンドでインストールし、以下の「Simple Server」の公式サンプルを参考に、WebSocketサーバーを準備します。

server.mjs

import { WebSocketServer } from 'ws';

const wss = new WebSocketServer({ port: 8080 });

wss.on('connection', function connection(ws) {
  ws.on('error', console.error);

  ws.on('message', function message(data) {
    console.log('received: %s', data);
  });

  ws.send('something');
});

上記は、ポート番号 8080 で待ち受けをして、クライアントとの接続が確立した際には、クライアントに対してメッセージ「something」を送ります。
それと、クライアントからメッセージが送られてきた際に、受けとったメッセージの内容を出力します。

クライアント側のプログラム

クライアント側のプログラムを準備します。

以下の、MDN のページのプログラムを使います。

●WebSocket - Web API | MDN
　https://developer.mozilla.org/ja/docs/Web/API/WebSocket

app.js

const socket = new WebSocket("ws://localhost:8080");

socket.addEventListener("open", (event) => {
  socket.send("Hello Server!");
});

socket.addEventListener("message", (event) => {
  console.log("Message from server ", event.data);
});

上記は、サーバーに接続をして、接続後に「Hello Server!」というメッセージを送ります。
それと、メッセージを受けとった時に、受けとったメッセージの内容を出力します。

動作確認

上記の両方のプログラムを動かし、動作確認を行います。
サーバーを先に動かし、その後にクライアント側を動かします。

以下の左のウィンドウがサーバー側、右側がクライアント側ですが、サーバーとクライアントとの間でメッセージのやりとりが問題なく行えるのを確認できました。

Node.js でフラグなしで WebSocket が使えるようになり、JavaScript での WebSocket の利用が、以前より一段と手軽になりました。

Node.js と ws でシンプルな WebSocketサーバー ＋ Node.js v22 でフラグなしで使える WebSocket