Javascript GatsbyJS中的Socket IO客户端不';行不通
朋友们好,我是新来的,我发现有一个难题,我在react js中使用了Socket IO Client,没有任何问题,与我在Gatsby中使用的语法相同,我发现了这个问题。我的节点js服务器没有检测到新客户端何时加入 这是我的剧本 反应JS组件(工作)Javascript GatsbyJS中的Socket IO客户端不';行不通,javascript,node.js,reactjs,socket.io,gatsby,Javascript,Node.js,Reactjs,Socket.io,Gatsby,朋友们好,我是新来的,我发现有一个难题,我在react js中使用了Socket IO Client,没有任何问题,与我在Gatsby中使用的语法相同,我发现了这个问题。我的节点js服务器没有检测到新客户端何时加入 这是我的剧本 反应JS组件(工作) 感谢您的支持:)我解决了这个问题,问题是客户端的软件包版本我改为“2.2”,因为以前的“2.3”不符合我的逻辑,它现在可以工作了:D您有任何回购的例子吗?是的,这也适用于我。服务器上运行的socket.io版本需要与Gatsby中运行的版本匹配。尽
感谢您的支持:)我解决了这个问题,问题是客户端的软件包版本我改为“2.2”,因为以前的“2.3”不符合我的逻辑,它现在可以工作了:D您有任何回购的例子吗?是的,这也适用于我。服务器上运行的socket.io版本需要与Gatsby中运行的版本匹配。尽管我安装了最新的socket.io-client(3.0.3),它还是被忽略了,使用了盖茨比版本(2.3.0)。
import React, { useEffect } from 'react';
import './App.css';
// socket
import socketIOClient from 'socket.io-client';
const socketEndPoint = 'http://localhost:32/';
const ioSocket = socketIOClient(socketEndPoint);
// nameSpace: public_chat
const ns= 'public_chat';
const salaSocket = socketIOClient(socketEndPoint + ns)
const messageKey = 'test_message'; // Message id
function App() {
function sendMessage(){
salaSocket.emit(messageKey, 'Prueba de mensaje desde el cliente: '+Math.random())
}
function recepMessage(){
salaSocket.on(messageKey, (received) => {
alert('Message: '+ received)
})
}
useEffect(() => recepMessage() , [])
return (
<div className="App">
<button style={{marginTop: '50', padding: '10px'}} onClick={sendMessage}>
Send message
</button>
</div>
);
}
export default App;
import React, { useEffect } from 'react'
import './Chat.scss'
import { Button } from '@material-ui/core'
import socketIOClient from 'socket.io-client'
const socketEndPoint = 'http://localhost:32'
const sala = 'public_chat'
const salaSocket = socketIOClient(socketEndPoint + sala)
const messageKey = 'test_message'
function Chat() {
function initSocket() {
salaSocket.on(messageKey, received => alert('Message received: '+ received))
}
function sendMessage() {
salaSocket.emit(messageKey, `Send a message to server`)
}
useEffect(() => {
initSocket()
}, [])
return(
<div className='chat'>
<Button onClick={sendMessage}>send</Button>
</div>
)
}
export default Chat
const express = require('express')
const http = require('http')
const socketIo = require('socket.io')
const PORT = process.env.PORT || 32
const app = express()
const server = http.createServer(app)
const io = socketIo(server, {origins: '*:*'})
app.get('/', (req, res) => res.sendFile(`${__dirname}/index.html`))
server.listen(PORT, () => console.log(`Socket runing at port: ${PORT}`))
const sala = io.of('public_chat')
const messageKey = 'test_message'
sala.on('connection', socket => {
console.log('New user connected', socket.id)
socket.on(messageKey, data => {
console.log('received: ', data)
sala.emit(messageKey, data)
})
})