webSockect的使用

2023-11-23  本文已影响0人  指尖轻敲

Node端

首先要先下载ws模块npm i -S ws

const { WebSocketServer } = require('ws');
function initWS() {
    const wss = new WebSocketServer({
        port: 3111,
    });
    // 前端连接成功会进connection
    wss.on('connection', (ws) => {
        ws.on('error', () => {
            console.log('ws error');
        });
        // 收到前端发送的消息,会进message监听
        ws.on('message', (data) => {
            console.log(data.toString());
            ws.send('我是后端');
        });
    });
}
module.exports = {
    initWS
};

这样一个webSocket服务就创建成功了。前端通过ws://127.0.0.1:3111连接即可(这里是在本地,发布到线上要写先线上地址)。

前端部分

以Vue项目为例:

data: ()=>{
    return {
        ws: null
    }   
},
mounted() {
    // 连接web socket服务
    this.ws = new WebSocket('ws://127.0.0.1:3111');
    // 连接成功回调
    this.ws.onopen = () => {
        console.log('WebSocket connected');
    };
    // 接收到消息回调
    this.ws.onmessage = (data) => {
        console.log('接收到后端消息:', data);
    };
}

methods: {
    sendWsMessage(){
        this.ws.send('我是前端');
    }
}

websocket连接成功之后,调用send方法向socket服务发送消息,触发服务端的message监听后立即向前端回复了消息,前端在message中接收到后端的回复消息。

上一篇 下一篇

猜你喜欢

热点阅读