WebSocket的基础操作

如果说我们想让前后端进行交互，前端直接请求后端数据就可以，但是如果说我们想让后端主动向前端发送请求，那我们就需要使用我们今天要讲的这个技术，就是websocket技术；

websocket基于tcp连接；

// WebSocket服务器的创建

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });

通过上边的代码，我们就开启了一个在8080端口上的服务端

// 服务器端监听连接事件
server.on('connection', (socket) => {
    console.log('Client connected');

    // 监听消息事件
    socket.on('message', (message) => {
        console.log(`Received: ${message}`);
        
        // 向客户端发送消息
        socket.send(`Server received: ${message}`);
    });

    // 监听连接关闭事件
    socket.on('close', () => {
        console.log('Client disconnected');
    });
});

接下来我们使用浏览器来实现客户端

// 在浏览器端使用JavaScript创建WebSocket连接
const socket = new WebSocket('ws://localhost:8080');

一些事件的响应和设置

// 监听连接打开事件
socket.addEventListener('open', (event) => {
    console.log('Connected to server');

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

// 监听消息事件
socket.addEventListener('message', (event) => {
    console.log(`Received from server: ${event.data}`);
});

// 监听连接关闭事件
socket.addEventListener('close', (event) => {
    console.log('Connection closed');
});