如何正确设置套接字io在MERN应用程序?

Question

我是第一次使用socket.io。我对它的工作原理有基本的了解，但我正在努力在MERN应用程序中找到合适的设置。如果有任何文章或指导，你可以给我，我会很感激。我正在建立社交网络应用程序，我需要有实时通知和消息。所以我不确定如何设置插座。响应中的IO客户端。我应该在helper文件中实例化它，就像express中的mongoose一样，还是有其他方法?由于

Answer 1

Install socket.io for server app

安装插座。IO - client for client app

进口套接字。服务器页的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();
};
};