java Springboot搭建websocket 服务端和html客户端代码
这块 网上案例挺多的 本来也不准备写 但是 反正也是接触到了 写下来 也算做个记录
第一步、引入jar包
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
springboot项目 自带websocket就直接引入了
第二步、搭建websocket服务
- WebSocketConfig
package com.jinfu.sdkdemo.websocket; 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; @Configuration @EnableWebSocket public class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpoint() { return new ServerEndpointExporter(); } }
- wobsocket服务
package com.jinfu.sdkdemo.websocket; import lombok.extern.slf4j.Slf4j;import org.springframework.stereotype.Component; import javax.annotation.PostConstruct; import javax.websocket.*; import javax.websocket.server.PathParam; import javax.websocket.server.ServerEndpoint; import java.util.concurrent.ConcurrentHashMap; /** * @ServerEndpoint 通过这个 spring boot 就可以知道你暴露出去的 websockst 应用的路径，有点类似我们经常用的@RequestMapping。比如你的启动端口是8080，而这个注解的值是ws，那我们就可以通过 ws://127.0.0.1:8080/websocket 来连接你的应用 * @OnOpen 当 websocket 建立连接成功后会触发这个注解修饰的方法，注意它有一个 Session 参数 * @OnClose 当 websocket 建立的连接断开后会触发这个注解修饰的方法，注意它有一个 Session 参数 * @OnMessage 当客户端发送消息到服务端时，会触发这个注解修改的方法，它有一个 String 入参表明客户端传入的值 * @OnError 当 websocket 建立连接时出现异常会触发这个注解修饰的方法，注意它有一个 Session 参数 */ @ServerEndpoint("/websocket/{id}") @Component @Slf4j public class WebSocketServer {/** * concurrent包的线程安全Set，用来存放每个客户端对应的WebSocketController对象。 */ private static ConcurrentHashMap<String, WebSocketServer> webSocketMap = new ConcurrentHashMap<>(); //与某个客户端的连接会话，需要通过它来给客户端发送数据 private Session session; /** * 接收id */ private String id; /** * 连接建立成功调用的方法 */ @OnOpen public void onOpen(Session session, @PathParam("id") String id) { this.session = session; this.id = id; //如果已经包含该用户id，则移除后重新加入 if (webSocketMap.containsKey(id)) { webSocketMap.remove(id); webSocketMap.put(id, this); } else { //否则直接加入 webSocketMap.put(id, this); } } /** * 连接关闭调用的方法 */ @OnClose public void onClose() { if (webSocketMap.containsKey(id)) { webSocketMap.remove(id); log.info(">>> 用户：{}已关闭连接", id); } else { log.info(">>> 连接已关闭..."); } } /** * 收到客户端消息后调用的方法 * * @param message 客户端发送过来的消息 */ @OnMessage public void onMessage(String message, Session session){ //接收传过来的消息 System.out.println("收到的消息："+message);
//发送消息
sendMessage("发送消息"); } /** * @param session * @param error */ @OnError public void onError(Session session, Throwable error) { log.error(">>> WebSocket出现未知错误: "); error.printStackTrace(); } /** * 实现服务器主动推送 */ public void sendMessage(String message){ try { this.session.getBasicRemote().sendText(message); } catch (Exception e) { log.error(">>> WebSocket消息发送出现错误: "); e.printStackTrace(); } } }
上面websockst的服务端就搭建好了
第三步、websocket客户端，也就是前端的websocket连接
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta charset="utf-8"/> <title>首页</title> </head> <body> <input type="button" value="发送" onclick="send()"> <div id="title"> </div> <!-- js部分 --> <script type="text/javascript" th:src="@{/jquery-3.2.1.min.js}"></script> <script> var ws; openWebSocket(); function openWebSocket(){ if ("WebSocket" in window) { //如果已经有连接，则断开并重新连接 if (ws != null) { ws.close(); ws = null; } // 创建一个 websocket
var UUID = 123;
ws = new WebSocket("ws://localhost:8080/websocket/"+UUID); ws.onopen = function () { console.log('WebSocket连接已建立') }; //获得消息事件 ws.onmessage = function (evt) { $("#title").html('<p>接收：'+evt.data+'</p>'); }; ws.onclose = function () { console.log('WebSocket连接已断开') }; } else { // 浏览器不支持 WebSocket console.log('您的浏览器不支持 WebSocket!'); } } function send(){ ws.send("发送一条消息"); }</script> </body> </html>
到这里 结束 总体上来说 很简单 玩一次后面就会了
