socket.io 客戶端與伺服器應用

客戶端應用

這裡主要講vue的應用

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_'
  }
}))

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_S他的訊息，則這裡應該補上字首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);