美文网首页
webSockect的使用

webSockect的使用

作者: 指尖轻敲 | 来源:发表于2023-11-23 18:14 被阅读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中接收到后端的回复消息。

    相关文章

      网友评论

          本文标题:webSockect的使用

          本文链接:https://www.haomeiwen.com/subject/cysgwdtx.html