如何在MERN应用中正确设置IO？

Question

我是socket.io的新手。我对它的工作原理有基本的了解，但是我正在努力在MERN应用程序中找到适当的设置。如果有任何文章或指导您可以给我，我将对其进行处理。我正在构建社交网络应用程序，我需要有实时通知和消息。因此，我不确定如何在React中设置socket.io客户端。我应该像Express一样在Helper File中实现它，还是还有其他方法？谢谢

Answer 1

           Install socket.io for server app

START socket.io-客户端应用程序应用程序

import import socket.io在服务器页面

const express = require('express');
const http = require('http');
const socketio = require('socket.io');
const cors = require('cors');

const app = express();
const server = http.createServer(app)
const io = socketio(server, { cors: { origin: '*' } }) //for omit cors error

const PORT = 2900;
app.use(express.json());
app.use(cors());


io.on('connect', (socket) => {
    console.log("user connected")

    socket.on('valor', ({ id, name, }, callback) => {
        console.log('data::', id, name)

        socket.emit('receiveGreet', { data: 'This message from server' }, (error) => {
            console.log('error::', error)
        })
        callback()
    })

    socket.on('disconnect', () => {
        console.log('user disconnected')

    })
})


app.get('/', (req, res) => {
    res.json('api running')
})

server.listen(PORT, console.log(`server running in node on port ${PORT}`));

客户端代码可能看起来像这样

import io from 'socket.io-client';

let socket: any;
const serverUrl = 'http://localhost:2900';

const MyComponent = () => {
  useEffect(() => {
    socket = io(serverUrl);

    socket.on('receiveGreet', (data) => {
      console.log('data::', data);
    });
  }, []);

  return () => {
    socket.disconnect();
    socket.off();
  };
};