【React】在React使用socket.io-client出现连接失败的情况

本文介绍了在开发中如何使用WebSocket进行实时通信,通过前端的socket.io-client库和后端的socket.io服务进行配置。在前端,我们不仅需要配置代理以处理跨域问题,还需要在连接时更新数据库中的socket.id。后端则创建了独立的IO服务监听socket消息,确保通信不被业务端口影响。示例代码详细展示了前端和后端的实现过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用场景

当我们需要实时通信的时候,我们就可以使用到到WebSocket,不过我们已经有了npm生态链,可以直接安装socket.io-client这个模块,对应的服务端使用socket.io模块。
下载安装:

// 前端
npm install socket.io-client
// 或
yarn add socket.io-client

// 后台
npm install socket.io

我们在开发项目的时候,可能会用到跨域功能,相应地配置了setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = app => {
    app.use('/api', createProxyMiddleware({
        target: 'http://localhost:9999',
        changeOrigin: true,
        ws: false
    }));
    app.use('/socket.io', createProxyMiddleware({
        target: 'ws://localhost:3004',
        changeOrigin: true,
        ws: true
    }));
};

那我们在配置socket的时候是否还需要传入目标网址呢?
亲测是需要的,另外我们最好在开启一个IO服务,用来监听socket消息,这样不会受到业务端口9999的影响。

const io = require('socket.io-client');
const socket = io('http://localhost:3004');
const app = express()
    , server = require('http').createServer(app)
    , io = require('socket.io')(server);
io.listen(3004);

module.exports = io;

代码实现

前端:

import store from '@store';
import { setSocketID } from '@store/actionCreators';
const Singleton = (function () {
    let instance;
    function createInstance() {
        const io = require('socket.io-client');
        const socket = io('http://localhost:3004');
        return socket;
    }

    return {
        getInstance: function () {
            if (!instance) {
                instance = createInstance().connect();
                // 创建socket就更新数据
                instance.on('connect', async () => {
                    // 更新数据库status中的socket.id
                    store.dispatch(setSocketID(instance.id));
                    await updateUS(instance.id);
                });
            }
            return instance;
        },
        disconnectSocket: ()=>{
            console.log('disconnect', instance)
            if (instance) {
                instance.disconnect();
            }
            instance = null;
            return instance;
        }
    };
})();

async function updateUS(socketID) {
    // ...
}
export default Singleton;

后端:

const app = express()
    , server = require('http').createServer(app)
    , io = require('socket.io')(server);
io.listen(3004);

// socket
io.on('connection', function (socket) {
    console.log('连接成功')
    socket.on('newMessage', async (params) => {
    	// 。。。
        }
    });
});

module.exports = io;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值