How to send messages to the front end using WebSocket?

1 year ago
Noah Thompson
2 minutes

Messages can be sent to the frontend using the WebSocket protocol.

WebSocket is a bidirectional communication protocol that allows real-time data transfer between client and server by establishing a persistent connection. In the frontend, the WebSocket API in JavaScript can be used to communicate with the server.

Here is a simple example demonstrating how to use WebSocket to push messages to the frontend.

  1. Server-side code (using Node.js and the express framework):
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. Front-end code.
// 创建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!');

In the example above, a WebSocket server is created by the server using Node.js and the express framework, listening on port 3000. When a front-end client connects to the server, the connection event is triggered, allowing the server to use the ws object to listen for messages sent from the front-end and send messages back using the send method.

The front end utilizes the WebSocket API in JavaScript to create a WebSocket object, and listens for both the successful connection event (onopen) and message received event (onmessage). After a successful connection, the front end can use the send method to send messages to the server and receive messages sent from the server by listening to the onmessage event.

Using WebSocket, the server and front-end can achieve real-time two-way communication, making it easy to push messages to the front-end.

bannerAds