react+node+websocket实现简单的双向沟通

小灰灰 2022-09-04 02:58 219阅读 0赞

一、node创建服务器

*  新建一个文件夹nodeServer

mkdir nodeServer
    cd nodeServer
    npm init

*  然后一路回车
 *  安装 express 框架

npm install express --save

*  启动项目

进入项目的根目录，建立一个 index.js 文件，并加入如下代码

const ws = require('nodejs-websocket')
    const PORT = 3002
    
    const server = ws.createServer( connect => {
        bordercast('进入')
        bordercast({
            type: 0,
            msg: '进入',
            // date: new Date().toLocaleDateString()
        })
        connect.on('text', (data) => {
            bordercast(
                {
                    type: 1,
                    msg: '说：'+ data,
                    // date: new Date().toLocaleDateString()
                }
            )
        })
        connect.on('close', ()=>{
            bordercast({
                type: 2,
                msg: '退出',
                // date: new Date().toLocaleDateString()
            })
        })
        connect.on('error', ()=> {
            console.log('错误处理')
        })
    } )
    function bordercast(msg){
        var msg = JSON.stringify(msg)
        server.connections.forEach(item => {
            item.send(msg)
        })
    }
    server.listen(PORT, () => {
        console.log('监听了'+PORT)
    } )

然后在控制台中输入

node index.js

接着使用浏览器访问 http://localhost:3000/，就可以看到效果了。node inde.js执行之后，需要手动去浏览器输入地址

二、用react发送接受值的代码

const ws = require('nodejs-websocket')
    const PORT = 3002
    
    const server = ws.createServer( connect => {
    	console.log('new connect...')
        bordercast({
            type: 0,
            msg: '进入',
            // date: new Date().toLocaleDateString()
        })
    
    	//处理客户端发送过来的消息
        connect.on('text', (data) => {
    		console.log("接收到的客户端消息:"+data);
    		connect.sendText("服务器端返回数据:"+data)
            bordercast(
                {
                    type: 1,
                    msg: '说：'+ data,
                    // date: new Date().toLocaleDateString()
                }
            )
        })
    
    	//监听关闭
        connect.on('close', ()=>{
    		console.log("connect closed")
            bordercast({
                type: 2,
                msg: '退出',
                // date: new Date().toLocaleDateString()
            })
        })
    
    	//监听异常
        connect.on('error', (error)=> {
            console.log('服务异常关闭',error)
        })
    } )
    function bordercast(msg){
        var msg = JSON.stringify(msg)
        server.connections.forEach(item => {
            item.send(msg)
        })
    }
    server.listen(PORT, () => {
        console.log('监听了'+PORT)
    } )

三、用vue发送接受值的代码

<template>
      <div>
      </div>
    </template>
    
    <script>
    
    export default {
      name: 'login',
      data () {
      },
      computed: {
      },
      created () {
        console.log('vue created')
        this.initWebSocket();
      },
      destroyed() {
        console.log('===destroyed');
        this.websock.close() //离开路由之后断开websocket连接
      },
      methods: {
        initWebSocket(){ //初始化weosocket
          const wsuri = "ws://localhost:3002/";
          this.websock = new WebSocket(wsuri);
          this.websock.onmessage = this.websocketonmessage;
          this.websock.onopen = this.websocketonopen;
          this.websock.onerror = this.websocketonerror;
          this.websock.onclose = this.websocketclose;
        },
        websocketonopen(){ //连接建立之后执行send方法发送数据
          let actions = {"vue":"vue"};
          this.websocketsend(JSON.stringify(actions));
        },
        websocketonerror(){//连接建立失败重连
          this.initWebSocket();
        },
        websocketonmessage(e){ //数据接收
          const redata = JSON.parse(e.data);
          console.log('vue onmessage',e.data)
          console.log('vue onmessage redata',redata)
        },
        websocketsend(Data){//数据发送
          this.websock.send(Data);
        },
        websocketclose(e){  //关闭
          console.log('vue断开连接',e);
        },
      }
    }
    </script>