使用 socket.io-client 库将数据从客户端发送到套接字服务器答案

【问题标题】：sending data from client to socket server using socket.io-client library使用 socket.io-client 库将数据从客户端发送到套接字服务器
【发布时间】：2019-07-28 22:18:39
【问题描述】：

我正在尝试使用 socket.io-client 库将数据从 React 客户端发送到 Express 服务器。但是，我无法理解如何做到这一点。

server.js

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

const server = http.createServer(app);
const io = socketio(server);
server.listen(3000);

var connectedUsers = new Set();

io.on("connect", function(socket) {
  var socketId = socket.id;
  console.log("ADDING :: " + socket.id);
  connectedUsers.add(socket);
  console.log("length of usersList " + connectedUsers.size);
  socket.on("data", data => {
    console.log("received session data");
    console.log(data.session);
  });
  socket.once("disconnect", function() {
    console.log("LEAVING :: " + socket.id);
    connectedUsers.delete(socket);
    console.log("length of usersList " + connectedUsers.size);
  });
});

socketConnection.js

import io from "socket.io-client";

let socket = io.connect("http://localhost:3000");

console.log(socket);

export default socket;

reactClient.js

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      term: "",
      searchIconClicked: false,
      eventKey: 1
    };
  }

  componentDidMount() {
    const session = getSession() || {};
    socket.on("connect", function(socket) {
      console.log("connected to the server");
    data = {
        session: session,
        state: state

            }
      socket.emit("data", data);
    });
}

但这对我不起作用。这是控制台输出

bundle.js:150635 GET http://localhost:3000/socket.io/?EIO=3&transport=polling&t=MmthEJc net::ERR_CONNECTION_REFUSED
Request.create @ bundle.js:150635
Request @ bundle.js:150537
XHR.request @ bundle.js:150464
XHR.doPoll @ bundle.js:150494
Polling.poll @ bundle.js:74172
Polling.doOpen @ bundle.js:74117
Transport.open @ bundle.js:38330
Socket.open @ bundle.js:149843
Socket @ bundle.js:149716
Socket @ bundle.js:149623
Manager.open.Manager.connect @ bundle.js:73642
(anonymous) @ bundle.js:73956

Invalid Host/Origin header
error @ bundle.js:84210
onmessage @ bundle.js:86117
EventTarget.dispatchEvent @ bundle.js:86297
(anonymous) @ bundle.js:87014
SockJS._transportMessage @ bundle.js:87012
EventEmitter.emit @ bundle.js:86213
WebSocketTransport.ws.onmessage @ bundle.js:89088

【问题讨论】：

你有没有在浏览器控制台中得到connected to the server？
是的，在控制台日志中可以看到连接服务器后生成的socketid。
尝试将您在connect 事件处理程序socket.on("connect", function(socket) 中获取的参数重命名为socket.on("connect", function(socketOnConnect)
在前端侧
当然，我会试试的。\

标签： reactjs socket.io

【解决方案1】：

我发现了问题。将 React 客户端代码更改为以下代码后，问题得到修复，并且能够在客户端和服务器之间传输数据

class Home extends Component {
   constructor(props) {
     super(props);
     this.state = {
     term: "",
     searchIconClicked: false,
     eventKey: 1
 };
 }

 componentDidMount() {
    const session = getSession() || {};
    socket.emit("data", session);
 }
}

【讨论】：