Websocket是客户端与服务端的通信。本系统应用html5原生的Websocket,分为客户端和服务端。
客户端写在页面js中,客户端进行监听,一旦后端有了新订单,监听到消息,进行相应的操作。弹出框,音乐等
客户端js代码:
<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通信发生错误!');
}
//窗口关闭时,Websocket关闭
window.onbeforeunload = function () {
websocket.close();
}
</script>
后端代码:
1.引入Websocket依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
2.添加Websocket配置:
@Component
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}
3.编写Websocket类:
@Component
@ServerEndpoint("/webSocket")
@Slf4j
public class WebSocket {
private Session session;
//定义Websocket容器,储存session
private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>();
//对应前端的一些事件
//建立连接
@OnOpen
public void opOpen(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) {
//遍历储存的Websocket
for (WebSocket webSocket : webSocketSet) {
log.info("【websocket消息】广播消息,message={}", message);
//发送
try {
webSocket.session.getBasicRemote().sendText(message);
}catch (Exception e){
e.printStackTrace();
}
}
}
}
4.用户端下单,创建了新的订单就触发发送消息的代码
@Autowired
private WebSocket webSocket;
@Override
@Transactional
public OrderDTO create(OrderDTO orderDTO) {
//1-4 创建订单的逻辑
//...
//...
//5.发送Websocket消息
webSocket.sendMessage("有新的订单") ;
return orderDTO;
}
发送请求,创建订单成功
前端接收到后端出来的信息
此时,前端根据后端返回的消息内容,进行相应的判断和显示。(HTML中提示有新订单效果的代码略)