webSocket前端代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>websocket</title> </head> <body> <script> let websocket = null; if (typeof WebSocket != 'undefined') { websocket = new WebSocket('ws://localhost:9701/webSocket'); console.log("您的浏览器支持Websocket通信协议"); }else{ alert("您的浏览器不支持Websocket通信协议,请使用Chrome或者Firefox浏览器!") } websocket.onopen = function (event) { console.log('建立链接'); } websocket.onclose = function (event) { console.log('链接关闭'); } websocket.onmessage = function (event) { console.log('收到消息:' + event.data); // 弹窗 播放音乐 } websocket.onerror = function () { console.log('websocket通信发生错误。'); } websocket.onbeforeunload = function () { websocket.close(); } </script> </body> </html>
后端代码
package com.pls.bid.preparation.utils; 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.ServerEndpoint; import java.io.IOException; import java.util.concurrent.CopyOnWriteArraySet; /** * @Description WebSocket 通信工具类 * @Author wwwang <1825153451@qq.com> * @Version V1.0.0 * @Since 1.0 * @Date 2021/9/1 * 你我山巅自相逢 */ @Component @ServerEndpoint("/webSocket") @Slf4j public class WebSocket { private Session session; private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>(); /** * 检测链接 * @param session */ @OnOpen public void onOpen(Session session){ this.session = session; webSocketSet.add(this); log.info("[ WebSocket消息 ] 有新的链接,总数:{}",webSocketSet.size()); } /** * 检测链接断开 */ @OnClose public void onClose(){ webSocketSet.remove(this); log.info("[ WebSocket消息 ] 链接断开,总数:{}",webSocketSet.size()); } /** * 接收消息 * @param message */ @OnMessage public void onMessage(String message){ log.info("[ WebSocket消息 ] 收到来自客户端发来的消息:{}",message); } /** * 给指定客户端发送消息 * @param message */ public void sendMessage(String message,WebSocket webSocket){ log.info("[ WebSocket消息 ] 广播消息,message={}",message); try { webSocket.session.getBasicRemote().sendText(message); } catch (IOException e) { e.printStackTrace(); } } /** * 广播消息 * @param message */ public void sendMessage(String message){ for (WebSocket webSocket : webSocketSet) { log.info("[ WebSocket消息 ] 广播消息,message={}",message); try { System.out.println(webSocket.session.toString()); webSocket.session.getBasicRemote().sendText(message); } catch (IOException e) { e.printStackTrace(); } } } }
webSocketConfig配置类
package com.pls.bid.preparation.config; import org.springframework.context.annotation.Bean; import org.springframework.stereotype.Component; import org.springframework.web.socket.server.standard.ServerEndpointExporter; /** * @Description 描述 * @Author wwwang <1825153451@qq.com> * @Version V1.0.0 * @Since 1.0 * @Date 2021/9/2 * 你我山巅自相逢 */ @Component public class WebSocketConfig { /** * 使用spring boot时 使用的是spring-boot的内置容器 * 如果要使用webSocket,需要注入ServerEndpointExporter * @return */ @Bean public ServerEndpointExporter serverEndpointExporter(){ return new ServerEndpointExporter(); } }
可能发生的错误
websocket.html:17 WebSocket connection to 'ws://localhost:9701/webSocket' failed:
解决方法
//在安全框架中放行 "/webSocket/**"
// 添加上述配置类