socket.io 客户端与服务器应用

客户端应用

一、使用原生的socket-io-client

1、工程中引入（要先npm下载）

import io from 'socket.io-client'

2、使用

（1）TCP连接（在页面mounts中）
this.socket = io.connect()	//connect参数传连接IP端口
（2）监听服务器消息
// 监听'msginfo'事件，用来接收其他客户端推送的消息
this.socket.on('msginfo', data => {
console.log(data)
})
this.socket.on('connect', data => {
console.log('连接')
})
this.socket.on('disconnect', data => {
console.log('断连')
}）
	
（3）发送消息给服务器
this.socket.emit('msginfo', "this is a test");	//第一个参数是自定义消息类型，需和后台协商，第二个参数是数据体

3、js跨域可能需要代理，开发环境下可以在proxy中先设置使用

   const remoteIP = 'http://localhost:'       

    proxy: {
      '/socket.io': {
        target: remoteIP + '7178',
        ws: true,
        changeOrigin: true
      },
      'sockjs-node': {
        target: remoteIP + '7178',
        ws: false,
        changeOrigin: true
      }
    },

二、使用vue-socket.io

1、npm安装vue-socket.io

2、main.js里引入

import VueSocketIO from 'vue-socket.io'

Vue.use(new VueSocketIO({
  debug: true,
  connection: process.env.NODE_ENV === 'development' ? 'http://localhost:7178' : 'http://xx.xx.xx.xx:7178',
  vuex: {
    store,
    actionPrefix: 'SOCKET_',
    mutationPrefix: 'SOCKET_'
  }
}))

conection属性：决定对于浏览器方，socket.io调用的TCP连接指向的服务器地址和端口，应当设置为服务器的地址（注意会有跨域问题需要解决）

debug属性:决定console是否打印socketio的运行日志

vuex属性:配置vuex插件

store:注明store引用位置

import store from './store'

Prefix:决定引用的action和mutation的前缀，会影响到socketio传递属性的属性名

3、客户端提交给服务器消息

this.$socket.emit('xxx', param) // 发送信息

xxx指提交的标签

4、vuex接收到服务器数据
假如前面设置了前缀，则如果接受的是服务器SYS_STA的消息，则这里应该补上前缀SOCKET_，变为SOCKET_SYS_STA

const mutations = {
  // SOCKET连接事件
  SOCKET_CONN: (state, data) => {
    console.log('socket连接', data)
  },
  SOCKET_SYS_STA: (state, data) => {
    state.sysSta = data
  },
}

5、不使用vuex，直接接收服务器数据

xxx为订阅消息的名称，这里不用加前缀:

    this.sockets.listener.subscribe('xxx', (data) => {
         console.log('订阅消息更新', data)
    })

注意这里listener一定要加上，官方的示例直接是this.sockets.subscribe，实测这样是没用的

客户端取消订阅指定消息:

this.sockets.listener.unsubscribe('xxx')

服务端应用

这里主要讲java服务端应用

1、pom.xml添加依赖

        <dependency>
            <groupId>com.corundumstudio.socketio</groupId>
            <artifactId>netty-socketio</artifactId>
        </dependency>

2、配置socketio初始化及接收客户端信息

   /**
     * socketIO 服务器实例
     */
    private SocketIOServer server;

    /**
     * socketIO服务器初始化
     * @param port
     */
    public void init(int port) {
        Configuration config = new Configuration();
//限制socket.io访问对象
//        config.setHostname("192.168.7.2");    
        config.setPort(port);
        server = new SocketIOServer(config);
        // 添加客户端连接监听器
        server.addConnectListener(client -> {
            client.sendEvent("CONN", "hello");
            logger.info("web client conn:"+client.getSessionId().toString());
        });

        //监听客户端事件：事件名称
        //监听xxx订阅事件 xxx这里是代值，实际按情况填入
        server.addEventListener("xxx", String.class, new DataListener<String>() {
            @Override
            public void onData(SocketIOClient client, String data, AckRequest ackSender) throws Exception {

        });

        //添加客户端断开连接事件
        server.addDisconnectListener(client -> {
            logger.info("web client disConn:"+client.getSessionId().toString());
            iotWebSocketClientDataPoolProvider.removeClient(client.getSessionId());
        });
        server.start();
        logger.warn("websocket init !!!");
    }

3、向指定客户端发送信息

server.getClient(id).sendEvent("xxx",data);

id指客户端对应的唯一标志，类型是UUID,xxx是代指属性

4、向所有客户端统一发送

server.getBroadcastOperations().sendEvent("SYS_STA", data);

socket.io 客户端与服务器应用

猜你喜欢