JavaScript WebSocketの基本

まず、WebSocketを使用するには、クライアント側とサーバー側の両方でWebSocket接続を確立する必要があります。以下に、クライアント側の基本的なコード例を示します。

// クライアント側のコード例
// WebSocket接続を確立する
const socket = new WebSocket('ws://サーバーのアドレス');
// 接続が確立されたときの処理
socket.onopen = function() {
  console.log('WebSocket接続が確立されました');

  // サーバーにデータを送信する例
  socket.send('Hello, Server!');
};
// メッセージを受信したときの処理
socket.onmessage = function(event) {
  const message = event.data;
  console.log('サーバーからメッセージを受信しました:', message);
};
// 接続が閉じられたときの処理
socket.onclose = function(event) {
  console.log('WebSocket接続が閉じられました:', event.code, event.reason);
};

上記のコードでは、new WebSocket('ws://サーバーのアドレス')を使用してWebSocket接続を確立し、onopen、onmessage、oncloseなどのイベントリスナーを設定しています。

次に、サーバー側の基本的なコード例を示します。この例では、Node.jsのwsモジュールを使用してWebSocketサーバーを作成しています。

// サーバー側のコード例
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
// 接続が確立されたときの処理
wss.on('connection', function(socket) {
  console.log('クライアントとのWebSocket接続が確立されました');
  // クライアントからメッセージを受信したときの処理
  socket.on('message', function(message) {
    console.log('クライアントからメッセージを受信しました:', message);
    // クライアントにデータを送信する例
    socket.send('Hello, Client!');
  });
  // 接続が閉じられたときの処理
  socket.on('close', function(code, reason) {
    console.log('WebSocket接続が閉じられました:', code, reason);
  });
});

この例では、wss.on('connection', function(socket) { ... })を使用してクライアントからの接続を待ち受け、socket.on('message', function(message) { ... })でクライアントからのメッセージを処理しています。

WebSocketを使用することで、クライアントとサーバー間でリアルタイムのデータのやり取りが可能になります。WebSocketはチャットアプリケーション、リアルタイムの通知システム、マルチプレイヤーゲームなど、さまざまな用途に利用されています。

以上が、JavaScriptのWebSocketの基本的な使い方とコード例の紹介です。これを参考に、リアルタイム通信を実現するためのWebSocketを活用してみてください。