前端WebSocket进行消息实时推送和提示（附代码）

功能举例： 通过特定操作实时推送到页面反馈进行弹窗和播放音乐。
 

先贴源代码地址： 点我GO

---

• 引入pom

创建一个基础的Spring Boot工程（没有特定版本），并在pom.xml中引入需要的依赖内容：

    org.springframework.boot
    spring-boot-starter-web



    org.springframework.boot
    spring-boot-starter-freemarker



    org.springframework.boot
    spring-boot-starter-websocket



    org.springframework.boot
    spring-boot-starter-test
    test

 

---

•   配置配置文件（看需要配置） ：

spring.freemarker.template-loader-path=classpath:/templates
spring.mvc.static-path-pattern=/static/**

---

•  在需要接收消息的页面进行配置 ：

---

• 配置WebSocket Bean ：

@Component
public class WebSocketConfig {

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

---

• 实现webSocket

@Component
@ServerEndpoint("/webSocket")
public class WebSocket {
    
    private Session session;

    private static CopyOnWriteArraySet webSocketSet = new CopyOnWriteArraySet<>();

    @OnOpen
    public void onOpen(Session session){
        this.session = session;
        webSocketSet.add(this);
        System.out.println("新的连接 总数:"+webSocketSet.size());
    }


    @OnClose
    public void onColse(){
        webSocketSet.remove(this);
        System.out.println("断开连接 总数:"+webSocketSet.size());

    }

    @OnMessage
    public void onMessage(String message){
        System.out.println("收到客户端发来的消息:"+message);
    }

    public void sendMessage(String message){
        for (WebSocket webSocket : webSocketSet){
            System.out.println("广播消息:"+message);
            try {
                webSocket.session.getBasicRemote().sendText(message);
            } catch (IOException e) {
                e.printStackTrace();
            }

        }
    }
}

---

• 配置触发控制器

@RequestMapping("/shop")
public class ListController {

    @Autowired
    private WebSocket webSocket;

    /**
     * 接收推送来的消息的页面
     * @return
     */
    @RequestMapping(value ="/list")
    public String list(){
        return "list";
    }

    /**
     * 触发推送
     * 举例：list方法可以是订单列表，这个方法可以是下单的接口，下单后，list的订单列表提示收到新订单。
     * @return
     */
    @RequestMapping(value = "/test")
    @ResponseBody
    public String test(){
        webSocket.sendMessage("hello，来了新数据呢～");
        return "send over,Please return to the list request page。";
    }
}

---

• 配置websocket响应提示：

websocket.onmessage = function (event) {
        console.log('收到消息：'+event.data)
        alert(event.data);
        var myAuto = document.getElementById('notice');
        console.log('开始播放音乐！15秒后停止...');
        myAuto.play();
        setTimeout(function () {
            myAuto.pause();
            console.log('音乐停止...')
        },15000)
    }

 

---

• 测试展示：

请求list地址 http://localhost:8080/shop/list

 

 后台输出:

 

---

 

触发请求条件： http://localhost:8080/shop/test

 

list页面接收到消息：

 

---

 

查看：

---

 

 

 

如有不当之处,请予指正! 如果你有什么疑问也欢迎随时联系我共同探讨。

Email：wdnnccey#gmail.com

你配不上自己的野心 也辜负了所受的苦难