Websocket vue+Springboot前后端案例
前端js
根目录创建一个js文件
import Vue from 'vue'
//创建websocket对象
import store from '@/store/index'
let webSocket = null;
//创建webSocket连接
let createWebSocket = () => {
try {
let url = window.location.href
const ip = url.split('//')[1].split('/')[0]
let wsUri = "ws://scmallfuwuqi.cn.utools.club/ucar/websocket/"+store.state.user.username //ws://localhost:8080/contenxt-path/url/..
//其实只需要定义一个变量存放后端提供的WebSocket接口地址，然后
console.log(wsUri, 'wsUri')
webSocket = new WebSocket(wsUri);
console.log(webSocket, 'webSocket')
//初始化websocket连接
initWebsocket();
} catch (e) {
console.log('尝试创建连接失败');
//如果无法连接上webSocket 那么重新连接！可能会因为服务器重新部署，或者短暂断网等导致无法创建连接
reConnect();
}
};
//连接标识 避免重复连接
let isConnect = false;
//断线重连后，延迟5秒重新创建WebSocket连接 rec用来存储延迟请求的代码
let rec;
//定义重连函数
let reConnect = () => {
console.log('尝试重新连接');
//如果已经连上就不在重连了
if (isConnect) return;
rec && clearTimeout(rec);
// 延迟5秒重连 避免过多次过频繁请求重连
rec = setTimeout(function () {
createWebSocket();
}, 5000);
};
//初始化webSocket连接
let initWebsocket = () => {
//WebSocket连接建立之后会调用onopen方法
webSocket.onopen = function (e) {
console.log('初始化，open');
//连接建立后修改标识
isConnect = true;
// 建立连接后开始心跳
// 因为nginx一般会设置例如60s没有传输数据就断开连接 所以要定时发送数据
heartCheck.start();
};
//当websocket收到服务器发送的信息之后 会调用onmessage方法 getMsg用来封装获取到服务器的消息进行处理，下面会说明
webSocket.onmessage = function (e) {
getMsg(e);
console.log(e)
//获取消息后 重置心跳
heartCheck.reset();
};
//当websocket因为各种原因（正常或者异常）关闭之后，会调用onclose方法
webSocket.onclose = function (e) {
console.log('close', '关闭');
//连接断开后修改标识
isConnect = false;
// reConnect();
};
//当websocket因为异常原因（比如服务器部署、断网等）关闭之后，会调用onerror方法
//在onerror中需要调用reConnect方法重连服务器
webSocket.onerror = function (e) {
console.log('close', '出错了');
console.log('error');
//连接断开后修改标识
isConnect = false;
//连接错误 需要重连
reConnect();
};
};
//心跳发送/返回的信息
//服务器和客户端收到的信息内容如果如下 就识别为心跳信息 不要做业务处理
let checkMsg = 'heartbeat';
//心跳设置
var heartCheck = {
//每段时间发送一次心跳包 这里设置为20s
timeout: 200000,
//延时发送消息对象（启动心跳新建这个对象，收到消息后重置对象）
timeoutObj: null,
//一段时间后发送心跳包
start: function () {
this.timeoutObj = setTimeout(function () {
console.log('心跳1', Date.now())
if (isConnect) webSocket.send(checkMsg);
console.log('心跳2', Date.now())
}, this.timeout);
},
// 接收到服务器的信息之后要重置心跳发送的方法
reset: function () {
clearTimeout(this.timeoutObj);
this.start();
},
};
//获得消息之后 区别是心跳还是业务信息 如果是业务信息特殊处理（这里就用Element的notify才处理提醒）
let getMsg = (e) => {
console.log('message');
console.log(e.data);
if(JSON.parse(e.data)!=='保持心跳'){
store.commit('updateMessage', JSON.parse(e.data))
}
};
//关闭连接
let closeWebSocket = () => {
webSocket.close();
};
export default {
createWebSocket: createWebSocket,
closeWebSocket: closeWebSocket,
}
如果果断来了消息会放在Vuex中
然后有个难题,我们怎么去监听state中的message这个对象呢?
在我们的组件中添加计算属性,然后给这个计算属性配上侦听器
computed: {
getUserIcons() {
return this.$store.state.message;//在Vuex中拿值
},
},
watch: {
getUserIcons(val) {
this.messages.push(val);//messages是该组件在Data中一个数组绑定了组件上一个数组
console.log(val, "触发了监听器");
console.log(this.messages);
},
deep: true,
},
ok在组件中初始化
在组件中调用
<template>
{{messages}}
template>
<script>
import websocket from "../../websocket/websocket";
export default {
data(){
return{
messages:[]
}
},
methods:{
initWebSocket() {
if (!this.$store.state.user) return;
websocket.createWebSocket();
},
},
created(){
this.initWebSocket();
},
computed: {
getUserIcons() {
return this.$store.state.message;//在Vuex中拿值
},
},
watch: {
getUserIcons(val) {
this.messages.push(val);//messages是该组件在Data中一个数组绑定了组件上一个数组
console.log(val, "触发了监听器");
console.log(this.messages);
},
deep: true,
},
}
script>
<style scoped>
style>
前端就完成了
Springboot
首先确保你的跨域过滤器对上面ws://xxxxxx/xx是不做拦截的!放过这个请求地址
首先在你项目的commons中创建一个类叫WebSocketStock,用于存放目前连接着的websocketClient
import com.etoak.ucar.service.impl.WebSocket;
import lombok.Data;
import org.springframework.context.annotation.Configuration;
import org.springframework.scheduling.annotation.Async;
import org.springframework.stereotype.Component;
import javax.annotation.PostConstruct;
import java.util.HashMap;
@Data
public class WebSocketStock {
private static HashMap<String, WebSocket> stock =new HashMap<>();
public static void addToStock(String name,WebSocket webSocket){
stock.put(name,webSocket);
}
public static HashMap<String,WebSocket> getStock(){
return stock;
}
}
在你的service/impl中创建以下WebSocket核心类
import com.etoak.commons.Stock.WebSocketStock;
import lombok.Data;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Collection;
import java.util.Map;
import java.util.Set;
@Component
@ServerEndpoint("/websocket/{userName}")
@Slf4j
@Data
public class WebSocket {
private Session session;
public WebSocket(){
}
@OnOpen
public void onOpen(@PathParam("userName")String userName,Session session){
this.session =session;
WebSocketStock.addToStock(userName,this);
System.out.println(WebSocketStock.getStock().toString());
log.info("【websocket消息】有新的连接，总数：{}",WebSocketStock.getStock().size());
}
@OnClose
public void onClose(){
// Collection c =stock.getStock().values();
// c.remove(this);
Collection<WebSocket> values = WebSocketStock.getStock().values();
try{ values.remove(this);}catch (Exception e){e.printStackTrace();}
log.info("【websocket消息】连接断开，总数：{}",WebSocketStock.getStock().size());
}
@OnMessage
public void onMessage(String message){
log.info("【websocket消息】收到客户端发来的消息：{}",message);
}
public void sendMessage(String userName,String message){
Set<Map.Entry<String, WebSocket>> entries = WebSocketStock.getStock().entrySet();
for (Map.Entry<String, WebSocket> entry : entries) {
if(entry.getKey().equals(userName)){
try {
log.info("【websocket消息】发送消息：{}",message);
entry.getValue().getSession().getBasicRemote().sendText(message);
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
}
另外在WebSocket中如果超过一分钟没有通信会自动断开,所以在你的config中建立SaticScheduleTask
import com.etoak.commons.Stock.WebSocketStock;
import com.etoak.ucar.service.impl.WebSocket;
import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Configuration;
import org.springframework.scheduling.annotation.EnableScheduling;
import org.springframework.scheduling.annotation.Scheduled;
import javax.annotation.Resource;
import java.util.HashMap;
import java.util.Map;
@Configuration //1.主要用于标记配置类，兼备Component的效果。
@EnableScheduling // 2.开启定时任务
@Slf4j
public class SaticScheduleTask {
//3.添加定时任务
//@Scheduled(cron = "0/5 * * * * ?")
//或直接指定时间间隔，例如：5秒
//每隔30秒发一条消息
@Scheduled(fixedRate=30*1000)
private void configureTasks() throws Exception{
log.info("保持心跳");
HashMap<String, WebSocket> stockStock = WebSocketStock.getStock();
for (Map.Entry<String, WebSocket> stringWebSocketEntry : stockStock.entrySet()) {
stringWebSocketEntry.getValue().sendMessage(stringWebSocketEntry.getKey(),"保持心跳");
}
}
}
后端工程启动 测试 首先启动前端项目 确保成功执行initWebsocket()
public static void main(String[] args){
HashMap<String, WebSocket> stockStock = WebSocketStock.getStock();
for (Map.Entry<String, WebSocket> stringWebSocketEntry : stockStock.entrySet()) {
stringWebSocketEntry.getValue().sendMessage(stringWebSocketEntry.getKey(),"这是一条测试数据");
}
}
运行看看前端有没有这条消息吧!