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

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读