时间戳

首页 > 解决方案 > 事件上的 React JS 套接字不会触发

javascript - 事件上的 React JS 套接字不会触发

问题描述

我有一个 Express.js 后端和一个 React 前端。

我socket.io在后端安装。

应用程序.js

const server = app.listen(port, () => {
  console.log(`Server started on port, ${port} ${process.env.NODE_ENV}`);
});

const io = socket(server);

io.on('connection', (socket) => {
  console.log('connected',socket.id)
  socket.on('infoListUpdate', function () {
    socket.broadcast.emit('updateInfoList');
    console.log('jj')
  });
  socket.on('docsListUpdate', function () {
    socket.broadcast.emit('updateDocsList',{});
    console.log('emited')
  });
});

在反应我有

公司.js

export default function Company(props) {
  return (
    <Fragment>
      <Agent {...props} />
      <CreateDocs {...props} />
      <CreateInfo {...props} />
     
    </Fragment>
  );
}

在CreateDocs组件中，我这样做

 socket.emit('docsListUpdate')

然后我可以看到“发出”正在打印在后端的 console.log 上。所以我认为从前端发射到后端部分是有效的。

然后代理组件我添加了这个来监听那个事件

 socket.on('updateDocsList',(data)=>{
    console.log('i am here')
  })

"i am here"部分从不打印。

在 React 前端，我创建了一个socket.js文件并将套接字从该文件导入到组件中。

const io = require('socket.io-client');
const baseURL =process.env.REACT_APP_BE_URL;

const socket = io.connect(baseURL,{
    transports:['websocket']
})

export default socket;

我的代码有什么问题？

标签： javascriptreactjswebsocketsocket.io

解决方案

我把它socket.broadcast.emit('updateDocsList',{}); 改成socket.emit('updateDocsList',{});

原因：- 广播将向除发送者之外的所有人发出。

推荐阅读