赞
踩
1、什么是websocket
2、websocket的原理
3、websocket的心跳机制和重连机制
4、添加依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
<version>2.0.0.RELEASE</version>
</dependency>
5、添加Websocket服务配置
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
6、编写websocket工具类
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.concurrent.ConcurrentHashMap; @Component @ServerEndpoint("/webSocket/{uId}")用于标记WebSocket的服务端点 @Slf4j public class WebSocketServerUtil { private Session session; //与某个客户端的连接会话,需要通过它来给客户端发送数据 private static ConcurrentHashMap<Long,WebSocketServerUtil > webSocketMap = new ConcurrentHashMap<>(); private Long uId; @OnOpen public void onOpen(Session session, @PathParam("uId") Long uId){ //如果不想通过pathParam注解传递参数作为key,也可以获取请token来做key //String token= session.getRequestParameterMap().get("toekn").stream().findFirst().get(); this.session = session; this.uId = uId; if(webSocketMap .containsKey(uId)){ webSocketMap .remove(uId); webSocketMap .put(uId,this); }else{ webSocketMap .put(uId,this); } log.info("【websocket消息】有新的连接,总数:{}",webSocketMap.size()); } @OnClose public void onClose(){ if(webSocketMap.containsKey(uId)){ webSocketMap.remove(uId); } log.info("【websocket消息】连接断开,总数:{}",webSocketSet.size()); } @OnMessage public void onMessage(String message){ log.info("【websocket消息】收到客户端发来的消息:{}",message); } public void sendMessage(String message){ try { this.session.getBasicRemote().sendText(message); } catch (IOException e) { e.printStackTrace(); } } /** * 发送自定义消息 * */ public static void sendInfo(String message,Long uId) throws Exception { //log.info("发送消息到:"+uId+",报文:"+message); if(webSocketMap.containsKey(uId)){ webSocketMap.get(uId).sendMessage(message); }else{ log.error("用户"+uId+",不在线!"); throw new Exception("连接已关闭,请刷新页面后重试"); } } }
7、前后端测试
//后端测试发送 Long uId = new Long("1"); Map msgMap = new HashMap(); msgMap.put("step",1); msgMap.put("type",2); msgMap.put("msg","hello"); WebSocketServerUtil.sendInfo(JsonUtil.toJson(msgMap),uId); //前端接收 /** * 初始化websocket连接 */ function initWebSocket() { let uId = 1; var websocket = null; if('WebSocket' in window) { websocket = new WebSocket("ws://localhost:8009/webSocket"+uId ); } 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) { let data = JSON.parse(event.data); //业务处理.... if(data.step == 1){ alert(data.msg); } } websocket.onerror = function() { // notify.warn("websocket通信发生错误!"); // initWebSocket() } window.onbeforeunload = function() { websocket.close(); } } // 重连 function reconnect() { console.log("正在重连"); // 进行重连 setTimeout(function () { initWebSocket(); }, 1000); }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。