领导安排个任务,大屏显示数据,要与后台数据一致,所以用到了websocket,涉及的前后端代码整理如下,希望对大家有所帮助。
后端代码
pom文件添加依赖
<!--websocket依赖--> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> <version>2.7.0</version> </dependency>
Java WebSocketConfig 配置文件
package com.example.only.config; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.web.socket.config.annotation.EnableWebSocket; import org.springframework.web.socket.server.standard.ServerEndpointExporter; import javax.servlet.ServletRequestListener; @Configuration @EnableWebSocket public class WebSocketConfig implements ServletRequestListener { @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } }
WebSocket类 通用方法,这里因为大屏项目,没有登入的id,就没有加id验证
package com.example.only.common; import org.springframework.stereotype.Component; import javax.websocket.*; import javax.websocket.server.ServerEndpoint; import java.io.IOException; import java.util.concurrent.CopyOnWriteArraySet; @Component @ServerEndpoint(value = "/webSocket",decoders = { warningDecoder.class }, encoders = { warningEncoder.class }) public class WebSocket { private Session session; private static CopyOnWriteArraySet<WebSocket> webSockets = new CopyOnWriteArraySet<WebSocket>(); @OnOpen public void onOpen(Session session){ this.session = session; webSockets.add(this); System.out.println("连接成功"); } @OnClose public void onClose(Session session){ webSockets.remove(this); System.out.println("连接关闭"); } @OnMessage public void message(String message,Session session) { System.out.println("【WebSocket消息】收到客户端发来的消息:{}"+message); } //实现服务器主动推送(业务层不要调用这个方法,调用sendInfo) public void sendMseeage(Object object) throws IOException, EncodeException { System.out.println(object.toString()) this.session.getBasicRemote().sendObject(object); } //群发(或者单发)自定义消息,最终调用的方法 public void sendInfo(Object object) throws Exception{ for (WebSocket webSocket:webSockets) { webSocket.sendMseeage(object); } } }
warningDecoder 解码器类
package com.example.only.common; import com.alibaba.fastjson.JSON; import javax.websocket.DecodeException; import javax.websocket.EndpointConfig; public class warningDecoder implements javax.websocket.Decoder.Text<Object> { /* * 解码类 * * */ @Override public void destroy() { // TODO Auto-generated method stub } @Override public void init(EndpointConfig arg0) { // TODO Auto-generated method stub } @Override public Object decode(String string) throws DecodeException { return JSON.parseObject(string, Object.class); } @Override public boolean willDecode(String arg0) { return true; } }
warningEncoder编码器类
package com.example.only.common; import com.alibaba.fastjson.JSON; import javax.websocket.EncodeException; import javax.websocket.EndpointConfig; public class warningEncoder implements javax.websocket.Encoder.Text<Object> { /* * 编码器 * * */ @Override public void destroy() { // TODO Auto-generated method stub } @Override public void init(EndpointConfig arg0) { // TODO Auto-generated method stub } @Override public String encode(Object obj) throws EncodeException { return JSON.toJSONString(obj); } }
测试类:
@CrossOrigin(origins = "*", maxAge = 3600) @RestController @RequestMapping(method = {POST, GET}, value = "/admin/test") public class Test { @Autowired private WebSocket webSocket; @RequestMapping("/send") public void send( @RequestParam(value = "olv")String olv ) throws Exception { webSocket.sendInfo(olv); } }
前端代码:
const initWebSocket = () => {
var websocket = null;
if ("WebSocket" in window) {
// 后端代码的地址+端口号
websocket = new WebSocket("ws://ip:端口号/webSocket");
} else {
alert("该浏览器不支持websocket!");
}
websocket.onopen = function (event) {
console.log("建立连接");
websocket.send("Hello WebSockets!");
};
websocket.onclose = function (event) {
console.log("连接关闭");
reconnect(); //尝试重连websocket
};
//建立通信后,监听到后端的数据传递
websocket.onmessage = function (event) {
console.log(event);
};
websocket.onerror = function () {
// notify.warn("websocket通信发生错误!");
// initWebSocket()
};
window.onbeforeunload = function () {
websocket.close();
};
};
// 重连
const reconnect = () => {
console.log("正在重连");
// 进行重连
setTimeout(function () {
initWebSocket();
}, 1000);
};