使用场景

当我们需要实时通信的时候，我们就可以使用到到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;