【React】在React使用socket.io-client出現連接配接失敗的情況

文章目錄

• 使用場景
• 代碼實作

使用場景

當我們需要實時通信的時候，我們就可以使用到到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;