当前位置：首页 > news >正文

Springboot+vue实现webScoket

news 2025/7/19 23:42:33

需求

因为在做的项目中，有多个网站登录同一个用户，故想在某一个页面登录或者退出的时候，对其他页面进行相同的操作

跨域，跨页面，跨项目，跨标签页，https

因为一开始不像麻烦后端，所以先尝试了很多前端解决的方法

localStorage：可以跨页面，不可跨域
eventbus：不可跨页
Broadcast Channel API：不可跨项目，不可跨页面
postMessage：https的情况下不能跨域，本地可以跨
总之是用前端的方法没有解决这个问题，最后选择了用websocket，完美解决

实现：
目前实现的需求是vue2组件获取浏览器的唯一指纹来确定给后台的信息标识，
比如我打开了10个有这个组件的页面那么就是会有10发10个消息，
但是他们的id是相同的，如果这1个页面中有一个退出页面那么其他9个也会跟着退出，这样做目前有个问题是如果开的太多了不确定压力测试能不能过

java部分

java代码在github上：
https://github.com/Shi-haoD/webSocketDemo/tree/main

注意事项：

WebSocketServer文件中的onMessage方法：收到的报文形式需要时json格式的{key：‘value’}
其他的代码里面都有注释

前端部分

<template><div></div>
</template>
<script>
export default {name: '',components: {},mixins: [],props: {},data() {return {socket: null,murmurs:''};},computed: {},watch: {},mounted() {this.getmur();//调用 发送消息this.sendMessage('退出登录', '');},methods: {//获取浏览器指纹async getmur() {this.murmurs = await new Promise((resolve) => {Fingerprint2.get(function (components) {const values = components.map(function (component, index) {if (index === 0) {// 把微信浏览器里UA的wifi或4G等网络替换成空,不然切换网络会ID不一样return component.value.replace(/\bNetType\/\w+\b/,'');}return component.value;});// 生成最终id murmurconst murmur = Fingerprint2.x64hash128(values.join(''), 31);resolve(murmur);});});console.log('指纹指纹指纹');this.getSocket();},// 初始化WebSocket连接getSocket() {console.log('尝试连接 WebSocket');if (typeof WebSocket === 'undefined') {console.log('您的浏览器不支持WebSocket');return;}console.log('您的浏览器支持WebSocket');let socketUrl ='http://localhost/socket/imserver/' +this.murmurs;socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws');console.log('WebSocket URL:', socketUrl);this.socket = new WebSocket(socketUrl);// 打开事件this.socket.onopen = () => {console.log('WebSocket连接已打开');this.startHeartbeat(); // 开启心跳机制};// 收到消息事件this.socket.onmessage = (msg) => {console.log('收到消息:', msg.data);if (msg.data === '连接成功' ||msg.data === 'heartbeat' ||typeof msg.data === 'string') {console.log(msg.data);return;}let jsonMsg = {};try {jsonMsg = JSON.parse(msg.data);} catch (e) {console.error('解析消息失败:', e);return;}};// 关闭事件this.socket.onclose = () => {console.log('WebSocket连接已关闭');this.stopHeartbeat(); // 停止心跳机制};// 错误事件this.socket.onerror = (error) => {console.log('WebSocket发生了错误:', error);};},// 向服务器发送消息sendMessage(content, userName) {if (this.socket && this.socket.readyState === WebSocket.OPEN) {const message = JSON.stringify({toUserId: 'toUserId',contentText: 'contentText',userName: 'userName',});console.log('发送消息:', message);this.socket.send(message);} else {console.log('WebSocket连接未打开，无法发送消息');}},// 开启心跳机制startHeartbeat() {if (this.socket) {console.log('启动心跳机制');this.heartbeatInterval = setInterval(() => {if (this.socket.readyState === WebSocket.OPEN) {let hertmessage = JSON.stringify({type: 'heartbeat',});this.socket.send(hertmessage);}}, 30000); // 每30秒发送一次心跳包}},// 停止心跳机制stopHeartbeat() {if (this.heartbeatInterval) {clearInterval(this.heartbeatInterval);this.heartbeatInterval = null;console.log('停止心跳机制');}},},
};
</script>
<style lang="" scoped></style>