前端代码:
<script> ???var websocket = null; ???if(‘WebSocket‘ in window) { ???????websocket = new WebSocket(‘ws://sell.natapp4.cc/sell/webSocket‘); ???}else { ???????alert(‘该浏览器不支持websocket!‘); ???} ???websocket.onopen = function (event) { ???????console.log(‘建立连接‘); ???} ???websocket.onclose = function (event) { ???????console.log(‘连接关闭‘); ???} ???websocket.onmessage = function (event) { ???????console.log(‘收到消息:‘ + event.data) ???????//弹窗提醒, 播放音乐 ???????$(‘#myModal‘).modal(‘show‘); ???????document.getElementById(‘notice‘).play(); ???} ???websocket.onerror = function () { ???????alert(‘websocket通信发生错误!‘); ???} ???window.onbeforeunload = function () { ???????websocket.close(); ???}</script>
后端代码:
1.引入pom文件
???????<dependency> ???????????<groupId>org.springframework.boot</groupId> ???????????<artifactId>spring-boot-starter-websocket</artifactId> ???????</dependency>
2.配置config
import org.springframework.context.annotation.Bean;import org.springframework.stereotype.Component;import org.springframework.web.socket.server.standard.ServerEndpointExporter;@Componentpublic class WebSocketConfig { ???@Bean ???public ServerEndpointExporter serverEndpointExporter() { ???????return new ServerEndpointExporter(); ???}}
3.配置controller
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.util.concurrent.CopyOnWriteArraySet;@Component@ServerEndpoint("/webSocket")@Slf4jpublic class WebSocket { ???private Session session; ???private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>(); ???@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()); ???} ???@OnMessage ???public void onMessage(String message) { ???????log.info("【websocket消息】收到客户端发来的消息:{}", message); ???} ???public void sendMessage(String message) { ???????for (WebSocket webSocket: webSocketSet) { ???????????log.info("【websocket消息】广播消息, message={}", message); ???????????try { ???????????????webSocket.session.getBasicRemote().sendText(message); ???????????} catch (Exception e) { ???????????????e.printStackTrace(); ???????????} ???????} ???}}
H5 webSocket使用
原文地址:https://www.cnblogs.com/412013cl/p/10042476.html