微信点餐之消息推送（13）

前台：

在订单list页面增加websocket

resources\templates\list.ftl

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script>
    var websocket = null;
    /*判断浏览器是否支持*/
    if('WebSocket' in window){
        websocket = new WebSocket('ws://applenst.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('mymp3').play();

    }

    websocket.onerror = function (event) {
        alert("websocket通信发生错误");
    }

    /*浏览器关闭时*/
    window.onbeforeunload = function () {
        websocket.close();
    }
</script>

<#--websocket消息弹窗-->
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">
                    提醒
                </h4>
            </div>
            <div class="modal-body">
                你有新的订单
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" onclick="location.reload()" class="btn btn-primary">查看</button>
            </div>
        </div>

    </div>
</div>

<#--websocket播放音乐-->
<audio id="mymp3">
    <source src="/sell/mp3/song.mp3" type="audio/mpeg">
</audio>

后台：

在pom文件中要加入websocket依赖

<!--websocket依赖-->
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

编写websocket配置类

com\imooc\config\WebSocketConfig.java

package com.imooc.config;

import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * @author: menghaibin
 * @create: 2020-02-27 20:23
 * @description: websocket配置
 **/
Component
public class WebSocketConfig {

    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
        return new ServerEndpointExporter();
    }
}

编写websocket的实现类

com\imooc\service\WebSocket.java

package com.imooc.service;

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;

/**
 * @author: menghaibin
 * @create: 2020-02-27 20:26
 * @description: websocket业务实现
 **/
Component
@ServerEndpoint("/webSocket")
@Slf4j
public class WebSocket {

    private Session session;

    /*定义websocket容器*/
    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){
                log.error(e.getMessage());
            }
        }
    }

}

简单验证

访问：http://applenst.natapp4.cc/sell/seller/login?openid=123qwe
会跳转到订单列表，打印出建立连接表示成功

功能测试

在OrderServiceImp类中的create方法的最后调用消息推送的方法

 @Autowired
 private WebSocket webSocket;
 
 /*发送websocket消息*/
 webSocket.sendMessage("有新的订单");

用postman创建一个订单：

页面已经有了消息推送：