最近需要做一个1v1对战邀请，用到了socket，写一写使用方法
为什么使用websocket
因为它可以向服务端发送信息
目前功能
- 能够连接后台，并维持连接
- 后台能够监听每一位用户，给他/他们发送信息
- 前台能够接受信息。（这里扩展了一下，可以直接调用页面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)
})
}
}
