一: 加入依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
二: 配置 ServerEndpointExporter 暴露Endpoint
@Component
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}
三:编写 动作
/**
* WebSocketEndPoint
*
* @author guxiang
* @date 2017/11/19
*/
@Component
@Slf4j
@ServerEndpoint("/webSocket")
public class WebSocketConnect {
private Session session;
private static CopyOnWriteArraySet<WebSocketConnect> webSocketSet = new CopyOnWriteArraySet<>();
@OnOpen
public void onOpen(Session session){
this.session=session;
webSocketSet.add(this);
}
@OnClose
public void onClose(Session session){
webSocketSet.remove(this);
}
@OnMessage
public void onMessage(String message) {
log.info("【websocket消息】收到客户端发来的消息:{}", message);
}
public void sendMessage(String message) {
for (WebSocketConnect webSocketConnect: webSocketSet) {
log.info("【websocket消息】广播消息, message={}", message);
try {
webSocketConnect.session.getBasicRemote().sendText(message);
} catch (Exception e) {
e.printStackTrace();
}
}
}
}
四: 在前端界面编写连接
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
var websocket = null;
if('WebSocket' in window) {
websocket = new WebSocket(encodeURI('ws://localhost:8080/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>
五:发送消息的实例
image.png
网友评论