【WebSocket】复制就能用的socket（绑定组件）

最近需要做一个1v1对战邀请，用到了socket，写一写使用方法

为什么使用websocket

因为它可以向服务端发送信息

目前功能

1. 能够连接后台，并维持连接
2. 后台能够监听每一位用户，给他/他们发送信息
3. 前台能够接受信息。（这里扩展了一下，可以直接调用页面method。）

ps：Vue写的前端，需要接收信息的页面注册到socket中，信息传给前端时，招到页面调用函数。

以下是代码地址，这里就不贴代码了，更详细的介绍会在readme中。
注意：需要放开/bindingRecord/**请求地址，否则请求到不了后台
觉得有用给个star一下吧
https://gitee.com/somliy/WebSocket

目录介绍

├─websocket-java
│  ├─config                             // socket的配置文件
│  ├─entity                              // 通信时的实体类
│  ├─sender                           // 发送者
│  └─server                            // 服务端
└─websocket-js                      // 前端js部分  分为socketNotice.js 和 调用index.js

简单使用

前台：

url 不是以http开始 是以ws://localhost:xxxx开始

import SocketNotice from './socketNotice'

let connection;
export default {
  ...省略
  destroyed () {
    // 释放资源，以免页面重复注册
    console.log('开始销毁')
    this.$socket.unRegisterReceiver(this.$options.name)
  },
  methods: {
    init() {
      const url = 'ws://localhost:8888';
      // 分别传入 userId，url
      connection = new SocketNotice(1, url);
      // 建立连接
      connection.connect();
      // 注册当前页面
      // this.$options.name 可以获取当前文件名，作为注册组件的key存入
      connection.registerReceiver(this.$options.name, this);
      console.log('注册组件', this.$options.name)
    },
    send() {
      console.log('WEb发送信息 ：Send Message Test! 给后台');
      connection.send(JSON.stringify(
        {
          cmd: 'TEST',
          msg: '',  
          // key需要带着，回调时使用
          compName: this.$options.name,
          data: 'Send Message Test!'
        }
      ))
    },
    // 默认调用此方法
    onSocketMessage(data) {
      console.log(`组件 ${this.$options.name} 收到信息为 ：`, data)
    }
  }
}

后台：

将文件放入项目即可，（代码中默认给用户id为1的发送消息）
需要放开/bindingRecord/**请求地址，否则请求到不了后台

image.png

值得一提的是onMessage方法

/**
 * 接收到信息
 *
 * @param message
 */
@OnMessage
public void onMessage(String message, Session session) {

    TestWebSocketService testWebSocketService = (TestWebSocketService) SpringContextUtil.getBean("testWebSocketService");


    log.info("【收到】，客户端:{}，的信息:{}，连接总数:{}", session.getId(), message, WebSocketSessionManager.getSize());
    try {
        NoticeData msg = objectMapper.readValue(message, NoticeData.class);
        //有心跳回复一个,其他情况暂不处理
        if (NoticeData.Cmd.HEAR_BEAT.name().equals(msg.getCmd())) {
            session.getBasicRemote().sendText(objectMapper.writeValueAsString(NoticeData.heartBeatReply()));
        } else if (NoticeData.Cmd.TEST.name().equals(msg.getCmd())) {
            // 处理业务逻辑
            log.info("【接收消息】，类型：{}，内容：{}", msg.getCmd(), msg.getData().toString());
            //-----------------------------------------------------------------------------------
            //  这里收到消息后，立即给前台发回信息，只是测试使用，具体按照需要注入方法即可
            NoticeData data = new NoticeData();
            data.setCmd(NoticeData.Cmd.TEST.name());
            data.setMsg("测试");
            data.setCompName("Analysis");
            data.setData("已收到信息，收到信息为" + msg.getData().toString());
            testWebSocketService.test(data);
            //-----------------------------------------------------------------------------------
        }
    } catch (Exception e) {
        log.error("【处理消息异常】，接收到ws=" + session.getId() + "消息处理时异常:" + message, e);
    }
}

开始使用

首先调用init方法，建立联机 并 注册页面
然后调用send方法

• 前端控制台

  
  image.png

• 后端控制台

  
  image.png

这样到这里，一个简单的示例完成了
但是还是有一个问题，如何全局使用这个socket

把 socket 挂载到全局

每个前端都有一个获取用户信息的地方

// 首先判断是否挂载
if (!Vue.prototype.$socket || !Vue.prototype.$socket.isConnected()) {
  try {
    const userId = store.getters.userInfo.userId
    const url = process.env.VUE_APP_SCOCKET_BASE_URL
    const connection = new SocketNotice(userId, url)
    connection.connect()
    // 挂载在Vue上，以后可以使用 this.$socket 调用socket
    Vue.prototype.$socket = connection
    console.log('【WebSocket】，初始化完成')
  } catch (e) {
    notification.error({
      key: 'socketError',
      message: '错误',
      description: JSON.stringify(e)
    })
  }
}