前端WebSocket进行消息实时推送和提示（附代码）-蒲公英云

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

小咪咪 2023-06-19 11:16 102阅读 0赞

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

先贴源代码地址：点我GO

引入pom

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

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-test</artifactId>
    <scope>test</scope>
</dependency>

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

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<WebSocket> 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)
}