SocketIO

下载socket.io.js

$this.SocketIO = {
            client: null,
            create: function (host, port, ready) {
                let _client = {};
                _client.host = host;
                _client.port = port;
                // _client.socket = io('http://' + host + ':' + port);
                _client.socket = io('http://' + host + ':' + port);
                _client.socket.on('connect', () => {
                    console.log("连接成功", _client.socket.id);
                    this.login();
                    if (ready) ready();
                });
                _client.socket.on('connect_error', (error) => {
                    console.error("连接错误");
                });
                _client.socket.on('connect_timeout', (timeout) => {
                    console.log("连接超时");
                });
                _client.socket.on('error', (error) => {
                });
                _client.socket.on('disconnect', (reason) => {
                    console.log("关闭连接");
                });
                _client.socket.on('reconnect', (attemptNumber) => {
                    console.log("重新连接");
                });
                _client.socket.on('reconnect_error', (error) => {
                });
                _client.socket.on('reconnect_failed', () => {
                });
                _client.socket.on('ping', () => {
                    //console.log("向服务器端发送数据包");
                });
                _client.socket.on('pong', (latency) => {
                    //console.log("接收服务器数据包");
                });
                _client.send = (event, msg, callback) => {
                    if (callback) {
                        _client.socket.emit(event, msg, (data) => callback);
                    } else {
                        _client.socket.emit(event, msg);
                    }
                }
                _client.receive = (event, callback) => {
                    _client.socket.on(event, callback);
                }
                this.client = _client;
                return this.client;
            },
            login: function () {
                if ($this.session.get('USER')) {
                    this.client.send('login', $this.session.get('USER').id);
                }
            },
            logout: function () {
                this.client.send('logout', $this.session.get('USER').id);
            }
        };

app.vue里全局监听
this.SocketIO.create('192.168.1.120', 9098);
this.SocketIO.client.receive('service_message', (data) => {
     window.dispatchEvent(new CustomEvent('cargo_trace', {detail:data}));
});

window.addEventListener('cargo_trace', (event)=>{})

service_message 与后端约好的名
cargo_trace 自定义监听的方法名