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

一、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)
      })
    })
 }

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

/**
 * Create HTTP server.
 */

var server = http.createServer(app);
require(../socketIO/socket)(server)

4. 在 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})