记录一下第一次webSocket通信成功

webSocket前端代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>websocket</title>
</head>

<body>

    <script>
        let websocket = null;

        if (typeof WebSocket != 'undefined') {
            websocket = new WebSocket('ws://localhost:9701/webSocket');
            console.log("您的浏览器支持Websocket通信协议");
        }else{
            alert("您的浏览器不支持Websocket通信协议，请使用Chrome或者Firefox浏览器！")
        }
        websocket.onopen = function (event) {
            console.log('建立链接');
        }

        websocket.onclose = function (event) {
            console.log('链接关闭');
        }

        websocket.onmessage = function (event) {
            console.log('收到消息：' + event.data);
            // 弹窗 播放音乐
        }

        websocket.onerror = function () {
            console.log('websocket通信发生错误。');
        }

        websocket.onbeforeunload = function () {
            websocket.close();
        }
    </script>
</body>

</html>

后端代码

package com.pls.bid.preparation.utils;

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.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

/**
 * @Description WebSocket 通信工具类
 * @Author wwwang <1825153451@qq.com>
 * @Version V1.0.0
 * @Since 1.0
 * @Date 2021/9/1
 * 你我山巅自相逢
 */
@Component
@ServerEndpoint("/webSocket")
@Slf4j
public class WebSocket {

    private Session session;

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

    /**
     * 检测链接
     * @param session
     */
    @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());
    }

    /**
     * 接收消息
     * @param message
     */
    @OnMessage
    public void onMessage(String message){
        log.info("[ WebSocket消息 ] 收到来自客户端发来的消息:{}",message);
    }


    /**
     * 给指定客户端发送消息
     * @param message
     */
    public void sendMessage(String message,WebSocket webSocket){
        log.info("[ WebSocket消息 ] 广播消息,message={}",message);
        try {
            webSocket.session.getBasicRemote().sendText(message);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    /**
     * 广播消息
     * @param message
     */
    public void sendMessage(String message){
        for (WebSocket webSocket : webSocketSet) {
            log.info("[ WebSocket消息 ] 广播消息,message={}",message);
            try {
                System.out.println(webSocket.session.toString());
                webSocket.session.getBasicRemote().sendText(message);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }



}

webSocketConfig配置类

package com.pls.bid.preparation.config;

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

/**
 * @Description 描述
 * @Author wwwang <1825153451@qq.com>
 * @Version V1.0.0
 * @Since 1.0
 * @Date 2021/9/2
 * 你我山巅自相逢
 */
@Component
public class WebSocketConfig {


    /**
     * 使用spring boot时 使用的是spring-boot的内置容器
     * 如果要使用webSocket，需要注入ServerEndpointExporter
     * @return
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
        return new ServerEndpointExporter();
    }
}

可能发生的错误

websocket.html:17 WebSocket connection to 'ws://localhost:9701/webSocket' failed:

解决方法

//在安全框架中放行 
"/webSocket/**"

// 添加上述配置类

 

 

posted @ 2021-09-02 10:59  惊鸿难定  阅读(121)  评论(0)  编辑  收藏  举报