react 结合 socket.io 实现简单通信功能

一时失言乱红尘 2023-02-11 10:20 6阅读 0赞

#### 一、react 结合 socket.io 实现简单通信功能 ####

1.  分别在 `react` 项目以及后台项目中使用 `socket.io`，在这里，后台选择为 `node`，通过 `npm install --save socket.io`命令进行下载 `socket.io` 。
2.  在 `node` 项目中， 创建 `socketIO` 文件夹，在里面创建 `socket.js` 文件，代码如下所示：

module.exports = function (server) { 
        const io = require('socket.io')(server)
      
        // 监视客户端与服务器的连接
        io.on('connection', function (socket) { 
          console.log('有一个客户端连接上了服务器')
      
          // 绑定监听, 接收客户端发送的消息
          socket.on('sendMsg', function (data) { 
            console.log('服务器接收到客户端发送的消息', data)
            // 处理数据
            data.name = data.name.toUpperCase()
            // 服务器向客户端发送消息
       		// 发送所有连接上服务器的客户端
            io.emit('receiveMsg', data) 
            console.log('服务器向客户端发送消息', data)
          })
        })
     }

1.  在`node` 项目中的 `bin` 文件夹下的`www.js` 文件中，将 `require` 导入 `socket.js` 文件，创建服务，代码如下所示：

/** * Create HTTP server. */
    
    var server = http.createServer(app);
    require('../socketIO/socket')(server)

1.  在 `react` 项目中，创建 `socket.js` 文件，代码如下所示：

import io from 'socket.io-client'
    
    // 连接服务器, 得到与服务器的连接对象
    const socket = io('ws://localhost:4000')
    // 绑定监听, 接收服务器发送的消息
    socket.on('receiveMsg', function (data) { 
      console.log('客户端接收服务器发送的消息', data)
    })
    
    // 发送消息
    socket.emit('sendMsg', { name: 'abc'})
    console.log('客户端向服务器发消息', { name: 'abc'})