Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

以下是英文描述的问题 (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.