无法从 React 客户端向 Node.js websocket 服务器发送消息

Posted 2023-02-16

【中文标题】无法从 React 客户端向 Node.js websocket 服务器发送消息

【英文标题】：Can't send a message to Node.js websocket server from React client

【发布时间】：2017-07-17 22:20:29

【问题描述】：

我有以下代码作为服务器：

var http = require('http'),
    cors = require('cors'),
    connect = require('connect'),
    WebSocketServer = require('ws');

var DataController = function() 
    this.PORT = 8090;
    this.startWS();
    this.startServer();


DataController.prototype = 
    // code to start server...

    getMessage: function(_message) 
        var that = this,
        message = JSON.parse(_message),
        msgName = message.name;
        console.log('new message ' + msgName);
    switch(msgName)
        case 'start':
        // here is some code to perform actions

正如您在此处看到的，我有getMessage 函数可以触发一些事件并调用它，我需要发送一条消息start。这很容易，对吧？令我惊讶的是，事实并非如此。 这就是我尝试在我的 React 组件中执行这个 .send() 方法的方式（我的 React 应用程序当然在不同的端口上运行）：

import React,  Component  from 'react';

class App extends Component 

    componentDidMount() 
        const socket = new WebSocket('ws://localhost:8090');
        socket.onopen = function() 
            socket.send(JSON.stringify(message: "start"));
        
    
    render() 
        return (
            <div className="container">App</div>
        )
    
 

 export default App;

我在这里尝试完成的工作 - 我只需要发送一个字 - start 即可真正开始从服务器接收数据，但我不能也不明白为什么。看，我的服务器代码中有一条console.log() 语句，它在发送消息时记录了一条消息start。所以它实际上应该记录start，但它记录undefined。 到目前为止我尝试了什么： 1. 只需发送start 2. 像这样定义一个对象：

const data = 
    message: "start"

然后将data传递给.send()函数 3. 像这样定义一个变量：const data = "start"

上面没有任何效果！一切都在服务器端返回undefined。我刚刚开始使用 websockets，找不到让它工作的方法。我主要指的是Mozilla，但也没有用。那么在这种情况下我实际上做错了什么？提前致谢，感谢您的帮助！

【问题讨论】：

您可能需要将socket.onopen 处理程序绑定到正确的上下文？

我认识的很多人都是从 socket.io 开始学习的。如果这是您第一次接触套接字，一般来说，我绝对推荐它作为一个很好的启动板。

尝试为 html-server 和 websocket 使用不同的端口，例如8090 和 8091.

【参考方案1】：

在我看来，您在 .send() 中发送的对象不包含名称键，因此当您将 msgName 定义为 message.name 时，它​​的计算结果为 undefined，因为该键在对象中不存在.

您可以通过更改发送过来的对象来轻松更改此设置，以便将“开始”绑定到的键称为名称。

【讨论】：

Kee，你救了我这个，真的很简单，只需将message 更改为name。该死，我真的应该在晚上休息一下，而不是解决问题:) 非常感谢！

很高兴能帮上忙！ :)