The problem that socket.io-client cannot be linked to the server in the react development environment #2427

caohuiboss · 2021-03-08T05:57:42Z

以下是英文描述的问题 (The following is the problem described in English)

In the development environment（yarn dev）:
In the react template, using socket.io-client to link the socket address does not respond, there is no error, there is no prompt message, and there is no prompt whether to connect or not. When I print the socket, it shows that contented is false.

But the link socket is valid in the following situations:

It is effective to directly link scoket directly in the project root directory index.html, and receive the information from the server
When the yarn build is used to run the yarn server link scoket is valid, and the information sent by the server is received

以下是中文描述的问题 (The following is the problem described in Chinese)

在开发环境中（yarn dev）:
在react模板中，使用 socket.io-client链接socket地址并没有反应，没有任何报错，没有任何提示信息，是否连接都没提示，当我打印socket时候显示 contented 为false

但是以下情况链接socket是有效的:

直接在项目根目录 index.html 中直接链接scoket是有效的，并收到了服务端发过来的信息
当使用yarn build以后运行yarn server 链接scoket是有效的，并收到了服务端发过来的信息

Reproduction

这是简单的node服务 server.js （This is a simple node service server.js）

const express = require('express')
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http, { cors: true });


app.get('/', function (req, res) {
    res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
    console.log('加入')
    socket.emit('news', { hello: 'world' });
});

http.listen(8080, () => {
    console.log('listening on *:8080');
});

这是访问localhost:8080 打开的页面（This is the page opened by visiting localhost:8080）

在此页面中 news 消息是链接上了的,成功打印出了 { hello: 'world' } （On this page, the news message is on the link, and it is successfully printed out {hello:'world'}）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    你好
</body>
<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io('http://localhost:8080');
  socket.on('news',(data)=>{
      console.log(data)
  })
</script>
</html>

这是我单独开启其他端口的一个简单html的页面来链接node的socket地址（This is a simple html page where I opened other ports separately to link the socket address of node）

在此页面中 news 消息是链接上了的,成功打印出了 { hello: 'world' } （On this page, the news message is on the link, and it is successfully printed out {hello:'world'}）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		你好
	</body>
	<script src="https://cdn.socket.io/3.1.1/socket.io.min.js" integrity="sha384-gDaozqUvc4HTgo8iZjwth73C6dDDeOJsAgpxBcMpZYztUfjHXpzrpdrHRdVp8ySO" crossorigin="anonymous"></script>
	<script type="text/javascript">
		const socket = io('http://localhost:8080');
		  socket.on('news',(data)=>{
		      console.log(data)
		  })
	</script>
</html>

这是用react官方脚手架创建的项目（This is a project created with react official scaffolding）

在此页面中 news 消息是链接上了的,并且成功打印出了 { hello: 'world' } （On this page, the news message is on the link, and it is successfully printed out {hello:'world'}）

import React from 'react';

import { io } from 'socket.io-client';

const App: React.FC = () => {
  const socket = io('http://localhost:8080');

  socket.on('news', (data) => {
    console.log(data);
  });

  return <div />;
};

export default App;

这是用vite创建的react项目（This is a react project created with vite）

在此页面中 news 消息是没有链接上，node服务也没有任何反应，包括页面里面都没有任何报错
On this page, the news message is not linked, and node service has no response, including no errors in the page

import React from 'react';

import { io } from 'socket.io-client';

const App: React.FC = () => {
  const socket = io('http://localhost:8080');

  socket.on('news', (data) => {
    console.log(data);
  });

  return <div />;
};

export default App;

通过各个情况的比较，只有vite会有失败情况，应该是vite的问题了。
但是我想应该需要在vite.config.ts 配置，但是我在文档中没有找到此情况的解决方案。

Through the comparison of various situations, only vite will fail, which should be the problem of vite.
But I think it should be configured in vite.config.ts, but I did not find a solution for this situation in the documentation.

System Info

vite version: ^2.0.5
Operating System: Mac
Node version: v14.16.0
Package manager (npm/yarn/pnpm) and version: yarn(1.22.5)

The text was updated successfully, but these errors were encountered:

caohuiboss · 2021-03-13T07:38:03Z

hello

caohuiboss · 2021-03-15T01:59:14Z

吓得我赶紧看解决了没有。。。。

你也碰到这个问题了嘛？我之前发过一次issues，案例不够被关了，这次发了这么久一直都没有人康康咋解决

caohuiboss · 2021-03-15T02:12:04Z

吓得我赶紧看解决了没有。。。。

你也碰到这个问题了嘛？我之前发过一次问题，案例不够被关了，这次发了这么久一直都没有人康康咋解决

是的，我是在Vue项目里面使用的，和你的情况极其相似。

坐等大神们解决了

langdon0003 · 2021-03-30T04:40:29Z

I hit them same problem with socketio-client 2.xx. Vite do nothing and no error and no warning.

caohuiboss · 2021-04-01T06:52:55Z

I hit them same problem with socketio-client 2.xx. Vite do nothing and no error and no warning.

这么久了还没官方的人回复一下😔

github-actions · 2021-04-01T06:57:59Z

Hello @caohuiboss. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

Shinigami92 · 2021-04-01T07:00:55Z

Currently the bot is just mentioning only the author of the issue 🤷
Help is welcome from everyone and with the help wanted label it gets public on e.g. github-help-wanted

w1301625107 · 2021-04-21T08:51:58Z

你试过低版本socket.io-client吗？

我发现socket.io-client 4.0 好像有点问题，但是我用 2.4.0的版本就可以

w1301625107 · 2021-04-21T09:58:43Z

你试过低版本socket.io-client吗？
我发现socket.io-client 4.0好像有点问题，但是我用2.4.0的版本就可以

是这样吗？我等下试试。馋了好久了。

嗯，用npm init @vitejs/app my-vue-app --template vue 的项目，同样的代码吧packjson 里的socket.io-client换成2.4.0立马就通了，我也折腾了一天

ShuaigeBie · 2021-08-28T15:35:33Z

老哥问题解决了没，我也遇到了这个问题，搞的我头都大了

caohuiboss · 2021-09-03T02:39:48Z

老哥问题解决了没，我也遇到了这个问题，搞的我头都大了

降低版本就好了，socket.io-client 4.0好像有点问题，但是用2.4.0的版本就可以

boenfu · 2021-09-13T15:28:55Z

老哥问题解决了没，我也遇到了这个问题，搞的我头都大了

import io from 'socket.io-client/dist/socket.io.js'; 试了有效 4.1.3

sapphi-red · 2022-04-13T10:35:01Z

I think this issue is duplicate of #4798.
@caohuiboss Does the workarounds written in it work for you?

sapphi-red · 2022-05-03T20:56:44Z

Closing as it is highly likely a duplicate of #4798.

caohuiboss added the pending triage label Mar 8, 2021

Shinigami92 added the help wanted Extra attention is needed label Apr 1, 2021

github-actions bot removed the pending triage label Apr 1, 2021

Shinigami92 added the pending triage label Apr 1, 2021

sapphi-red added duplicate This issue or pull request already exists and removed help wanted Extra attention is needed pending triage labels May 3, 2022

sapphi-red closed this as completed May 3, 2022

github-actions bot locked and limited conversation to collaborators May 18, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

The problem that socket.io-client cannot be linked to the server in the react development environment #2427

The problem that socket.io-client cannot be linked to the server in the react development environment #2427

caohuiboss commented Mar 8, 2021

caohuiboss commented Mar 13, 2021

caohuiboss commented Mar 15, 2021

caohuiboss commented Mar 15, 2021

langdon0003 commented Mar 30, 2021

caohuiboss commented Apr 1, 2021

github-actions bot commented Apr 1, 2021

Shinigami92 commented Apr 1, 2021

w1301625107 commented Apr 21, 2021

w1301625107 commented Apr 21, 2021

ShuaigeBie commented Aug 28, 2021

caohuiboss commented Sep 3, 2021

boenfu commented Sep 13, 2021

sapphi-red commented Apr 13, 2022 •

edited

Loading

sapphi-red commented May 3, 2022

The problem that socket.io-client cannot be linked to the server in the react development environment #2427

The problem that socket.io-client cannot be linked to the server in the react development environment #2427

Comments

caohuiboss commented Mar 8, 2021

以下是英文描述的问题 (The following is the problem described in English)

以下是中文描述的问题 (The following is the problem described in Chinese)

Reproduction

这是简单的node服务 server.js （This is a simple node service server.js）

这是访问localhost:8080 打开的页面（This is the page opened by visiting localhost:8080）

这是我单独开启其他端口的一个简单html的页面来链接node的socket地址 （This is a simple html page where I opened other ports separately to link the socket address of node）

这是用react官方脚手架创建的项目 （This is a project created with react official scaffolding）

这是用vite创建的react项目 （This is a react project created with vite）

System Info

caohuiboss commented Mar 13, 2021

caohuiboss commented Mar 15, 2021

caohuiboss commented Mar 15, 2021

langdon0003 commented Mar 30, 2021

caohuiboss commented Apr 1, 2021

github-actions bot commented Apr 1, 2021

Shinigami92 commented Apr 1, 2021

w1301625107 commented Apr 21, 2021

w1301625107 commented Apr 21, 2021

ShuaigeBie commented Aug 28, 2021

caohuiboss commented Sep 3, 2021

boenfu commented Sep 13, 2021

sapphi-red commented Apr 13, 2022 • edited Loading

sapphi-red commented May 3, 2022

这是我单独开启其他端口的一个简单html的页面来链接node的socket地址（This is a simple html page where I opened other ports separately to link the socket address of node）

这是用react官方脚手架创建的项目（This is a project created with react official scaffolding）

这是用vite创建的react项目（This is a react project created with vite）

sapphi-red commented Apr 13, 2022 •

edited

Loading