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

最新推荐文章于 2024-08-15 09:39:21 发布

城南花开ze

最新推荐文章于 2024-08-15 09:39:21 发布

阅读量5.5k

点赞数 1

分类专栏： React 文章标签： socket.io react 简单通信功能

本文链接：https://blog.csdn.net/weixin_42614080/article/details/106295330

版权

React 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

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

分别在 react 项目以及后台项目中使用 socket.io，在这里，后台选择为 node，通过 npm install --save socket.io命令进行下载 socket.io 。
在 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)
      })
    })
 }

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

/**
 * Create HTTP server.
 */

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

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