Node.js，反應 socket.io 發射（）不工作

Question

我想用 Socket IO 構建一個 ReactJS/NodeJs 應用程序。 我能夠在客戶端和服務器之間建立套接字連接，但是每當我按下按鈕發出消息時，服務器端沒有任何反應，這意味着沒有觸發console.log('new message:', msg) .

客戶端代碼：

import React from 'react';
import io from 'socket.io-client';

const socket = io.connect('http://localhost:4000');

function App() {

  socket.on('message', msg => {
    console.log('new message:', msg);
   });

  const handleMessageSend = () => {
    socket.emit('message', 'test');
  }

  return (
    <button onClick={handleMessageSend}>Send</button>
  );
}

export default App;

服務器：

const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

io.on('connection', socket => {
    socket.on('message', msg => {
        console.log('new message:', msg);
        socket.emit('message', msg)
    })
})

http.listen(4000, () => {
    console.log('Listening on port 4000');
})

有任何想法嗎 ？ 非常感謝提前

Answer 1

使用客戶端代碼，我找不到任何錯誤。 但是對於服務器代碼，1）我認為您在使用 express 時不需要 http 模塊。 所以，我把它拿出來以獲得更易讀的代碼。 2）我相信socket.emit('message', msg)應該是io.sockets.emit('message', msg) 。 你能試試這個嗎，讓我知道它是否有效？

const express = require ("express");
const socket = require ("socket.io");
const app = express();

const server = app.listen(4000, () => {
  console.log('Listening on port 4000');
})

const io = socket(server);

io.on('connection', socket => {
    socket.on('message', msg => {
        console.log('new message:', msg);
        io.sockets.emit('message', msg)
    })
})

Answer 2

我已經在handleMessageSend移動了套接字代碼。

你可以添加 preventDefault 來防止你的頁面刷新（我不確定你是否需要這個，因為你沒有使用表單和提交按鈕，但你現在可以使用它。）

你能試試這個，讓我知道它是否有效嗎？

反應組件：

import io from 'socket.io-client';

function App() {
  let serverUrl = 'localhost:4000'
  let socket = io(serverUrl);
  const handleMessageSend = (e) => {
    e.preventDefault();
    socket.emit("message", "test message")
    socket.on("message", function(msg){
      console.log("socket working on the frontend: ", msg);
    });
  }
  return (
    <button onClick={handleMessageSend}>Send</button>
  );
}

export default App;

這里是服務器文件：

const express = require ("express");
const socket = require ("socket.io");
const app = express();

const server = app.listen(4000, () => {
  console.log('Listening on port 4000');
})

const io = socket(server);

io.on('connection', socket => {
    socket.on('message', msg => {
        console.log('socket working at the backend', msg);
        io.sockets.emit('message', msg)
    })
})