vue+springboot集成websocket
vue+springboot集成websocket
项目需求
根据项目要求需要将后台消息实时推送给前端，可以在前端使用定时任务实时获取，使用websocket通信建立长连接。具体这两种谁比较占用资源没有测试过，目前自己使用的是websocket进行实现，话不多说上代码
JAVA后台
- 导入依赖，在pom.xml文件中加入以下依赖
org.springframework.boot
spring-boot-starter-websocket
2.配置类，WebSocketConfig，WebSocketServer
package com.hgzx.framework.config;
import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Component
public class WebSocketConfig {
/**
* 使用spring boot时，使用的是spring-boot的内置容器，
* 如果要使用WebSocket，需要注入ServerEndpointExporter
*
* @return
*/
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
package com.hgzx.framework.config;
import com.hgzx.common.utils.SecurityUtils;
import com.hgzx.xdywpt.notice.domain.NoticeMessagePersonl;
import com.hgzx.xdywpt.notice.mapper.NoticeMessagePersonlMapper;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import javax.websocket.OnClose;
import javax.websocket.OnError;
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.*;
import java.util.concurrent.CopyOnWriteArraySet;
@ServerEndpoint(value = "/websocket/{username}")
@Service
public class WebSocketServer {
private static Logger log = LoggerFactory.getLogger(WebSocketServer.class);
/**
* concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
*/
private static CopyOnWriteArraySet govWebSocketSet = new CopyOnWriteArraySet<>();
private Session govSession;
public static Map> govUserSessions = new HashMap<>();
public String pointsUrl;
/**
* 连接建立成功调用的方法
*/
@OnOpen
public void onOpen(Session session,@PathParam("username") String username) {
this.govSession = session;
List list = new ArrayList<>();
// 一个用户不同地方登陆所做的处理
if (govUserSessions.containsKey(username)) {
list = govUserSessions.get(username);
}
list.add(this);
govUserSessions.put(username, list);
//加入set中
govWebSocketSet.add(this);
}
/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose() {
//从set中删除
closeRemove(govWebSocketSet, govUserSessions);
}
private void closeRemove(CopyOnWriteArraySet webSocketSet, Map> userSessions) {
webSocketSet.remove(this);
Set>> entrySet = userSessions.entrySet();
for (Map.Entry> entry : entrySet) {
String key = entry.getKey();
boolean isFind = findRemove(key);
if (isFind) {
return;
}
}
}
/**
* 查找移除
*
* @param key
* @return
*/
private boolean findRemove(String key) {
return backOrFrontFind(key, govUserSessions);
}
private boolean backOrFrontFind(String key, Map> govUserSessions) {
List list = govUserSessions.get(key);
for (int i = 0; i < list.size(); i++) {
if (this.equals(list.get(i))) {
list.remove(i);
if (list.size() > 0) {
govUserSessions.put(key, list);
} else {
govUserSessions.remove(key);
}
return true;
}
}
return false;
}
/**
* @param error
*/
@OnError
public void onError(Throwable error) {
log.error("发生错误");
error.printStackTrace();
}
/**
* 实现服务器主动推送
*/
public synchronized void sendMessage(String message) {
try {
this.govSession.getBasicRemote().sendText(message);
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 群发自定义消息
*/
public static void sendInfo(String message,@PathParam("username") String username) {
log.info("推送消息到窗口推送内容:" + message);
backOrFrontSend(message,username,govWebSocketSet);
}
private static void backOrFrontSend(String message, @PathParam("username") String username,CopyOnWriteArraySet govWebSocketSet) {
List list = govUserSessions.get(username);
if (list != null) {
for (int i = 0; i < list.size(); i++) {
list.get(i).sendMessage(message);
}
}
}
@Override
public boolean equals(Object o) {
if (this == o) {
return true;
}
if (o == null || getClass() != o.getClass()) {
return false;
}
WebSocketServer that = (WebSocketServer) o;
return
Objects.equals(govSession, that.govSession) &&
Objects.equals(pointsUrl, that.pointsUrl);
}
@Override
public int hashCode() {
return Objects.hash(govSession,pointsUrl);
}
}
在WebSocketServer中的username参数就是自定义发送给什么用户，只要保持唯一性就可以了。
3、权限问题
vue在请求websocket服务的时候很多时候会出现404forbidden这个错误，这是因为请求路径权限的问题造成的，我们需要在后台进行放开，我这里使用的是springSecurity安全框架放开权限代码
.antMatchers("/**/websocket/**").anonymous()
如果使用的是shiro安全框架的话，可以自行百度下。
4、调用
java后台向前端发送消息，只需要调用WebSocketServer里面方法就可以了
WebSocketServer.sendInfo(message,username);
以上就是JAVA后台所做的工作了，下面开始前端VUE的工作
前端VUE
1.定义全局变量socket
data() {
return {
socket: "",
};
},
2.页面加载完成调用socket初始化方法
mounted() {
this.init()
},
3、实现socket初始化方法
methods: {
init: function () {
if(typeof(WebSocket) === "undefined"){
alert("您的浏览器不支持socket")
}else{
let username = sessionStorage.getItem("username");// 获取登录用户
var path = "ws://localhost:8080/websocket/"+username;// 请求路径
// 实例化socket
this.socket = new WebSocket(path)
// 监听socket连接
this.socket.onopen = this.open
// 监听socket错误信息
this.socket.onerror = this.error
// 监听socket消息
this.socket.onmessage = this.getMessage
}
},
open: function () {
console.log("socket连接成功")
},
error: function () {
console.log("连接错误")
},
getMessage: function (msg) {
let message= parseInt(msg.data);
console.log("message="+message);
},
send: function () {
this.socket.send(params)
},
close: function () {
console.log("socket已经关闭")
}
}
如果通信成功，java后台会调用到WebSocketServer中onOpen的方法，同时在vue页面open: function ()方法会执行打印：socket连接成功。
以上就是全部的工作，谢谢。