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'})