GatsbyJS 中的 Socket IO 客户端不起作用

Posted 2023-03-07

【中文标题】GatsbyJS 中的 Socket IO 客户端不起作用

【英文标题】：Socket IO Client in GatsbyJS doesn't work

【发布时间】：2020-05-17 17:34:13

【问题描述】：

朋友们你好，我是新来的，我发现有一个难题，我在 react js 中使用了 Socket IO Client 没有任何问题，与 Gatsby 使用的语法相同，我发现了这个问题。我的节点 js 服务器未检测到新客户端何时加入。

这是我的脚本。

React JS 组件（作品）

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;

使用 GatsbyJS 组件（不工作）

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

如您所见，两者都具有相同的脚本或有关套接字 io 使用的相同逻辑，但我不知道为什么 react 有效而 gatsbyjs 无效。也许是一个错误或有什么问题？

服务器（没问题）

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

感谢您的支持:)

【参考方案1】：

我解决了这个问题，问题是客户端的包版本我改为“2.2”，因为以前的“2.3”不符合我的逻辑，现在可以了：D

【讨论】：

你有任何 repo 可以举个例子吗？

是的，这也对我有用。服务器上运行的 socket.io 版本需要与 Gatsby 中运行的版本相匹配。即使我安装了最新的 socket.io-client (3.0.3)，它也被忽略了，并且使用了 Gatsby 版本（2.3.0 版）。