WebSocketでフロントエンドにメッセージを送信する方法は何ですか？

1年 ago
海斗, 葵
1 minute

フロントエンドにメッセージを送信する場合は、WebSocketプロトコルを使用できます。

WebSocketは両方向通信のプロトコルであり、クライアントとサーバー間で持続的な接続を確立することでリアルタイムの双方向データ転送を実現します。フロントエンドでは、WebSocket APIを使用してJavaScriptでサーバーと通信することができます。

以下は、WebSocketを使用してメッセージをフロントエンドにプッシュする方法を示す簡単な例です。

  1. サーバーサイドのコード（Node.jsおよびexpressフレームワークを使用）：
const express = require('express');
const app = express();
const WebSocket = require('ws');

const wss = new WebSocket.Server({ server: app.listen(3000) });

// 监听WebSocket连接事件
wss.on('connection', function connection(ws) {
  // 监听前端发送的消息
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
  });

  // 向前端发送消息
  ws.send('Hello, client!');
});
  1. フロントエンドのコード:
// 创建WebSocket连接
const socket = new WebSocket('ws://localhost:3000');

// 监听连接成功事件
socket.onopen = function() {
  console.log('Connected to server');
};

// 监听收到消息事件
socket.onmessage = function(event) {
  console.log('received: ' + event.data);
};

// 向服务器发送消息
socket.send('Hello, server!');

上記の例では、サーバーはNode.jsとexpressフレームワークを使用してWebSocketサーバーを作成し、ポート3000でリスニングしています。フロントエンドクライアントがサーバーに接続すると、connectionイベントがトリガーされ、サーバーはwsオブジェクトを使用してフロントエンドからのメッセージを監視し、sendメソッドを使用してフロントエンドにメッセージを送信することができます。

JavaScriptのWebSocket APIを使用して、WebSocketオブジェクトを作成し、接続成功イベント（onopen）とメッセージ受信イベント（onmessage）を監視します。接続が成功すると、フロントエンドはsendメソッドを使用してサーバーにメッセージを送信し、onmessageイベントを監視してサーバーからのメッセージを受信できます。

WebSocketを使用することで、サーバーとフロントエンドはリアルタイムで双方向の通信を実現し、簡単にメッセージをフロントエンドにプッシュすることができます。

bannerAds