【微信点餐】-- Websocket消息的应用

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中提示有新订单效果的代码略）

【微信点餐】-- Websocket消息的应用

猜你喜欢