<script>

    var websocket;

    if ('WebSocket' in window) {

        websocket = new WebSocket('ws://127.0.0.1:8080/websocket');//配置Websocket服务器端地址

    } else {

        alert("你的浏览器暂不支持websocket,请更换其他浏览器再试");

    }

    websocket.onopen = function (event) {

        console.log("建立连接");

    };

    websocket.onclose = function (event) {

        console.log("关闭连接");

    };

    websocket.onmessage = function (event) {

        console.log("收到消息," + event.data);

        // 弹窗提示与播放提示音乐

        var msg = event.data;

        if (msg === "秒杀已结束") {

            $('#seckill-box').html("秒杀结束");

        }

    };

    websocket.onerror = function (event) {

        console.log("websocket异常");

    };

    /**

     * readyState状态如下:

     * CONNECTING：值为0，表示正在连接；

     OPEN：值为1，表示连接成功，可以通信了；

     CLOSING：值为2，表示连接正在关闭；

     CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

     */

    // 向服务端发送消息(必须为open状态时可发送)

    if (websocket.readyState === 1) {

        websocket.send("服务端你好");

    }

</script>

@Configuration

public class WebSocketConfig {

    @Bean

    public ServerEndpointExporter serverEndpointExporter() {

        return new ServerEndpointExporter();

    }

}

@ServerEndpoint("/websocket")

@Component

@Slf4j

public class WebSocketService {

    /**

     * 记录当前websocket的连接数（保证线程安全）

     */

    private static LongAdder connectAccount = new LongAdder();

    /**

     *存放每个客户端对应的websocketServer对象(需保证线程安全)

     */

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

    /**

     * 与客户端的连接对象

     */

    private Session session;

    /**

     * 连接成功调用的方法

     * @param session

     */

    @OnOpen

    public void onOpen(Session session) {

        this.session = session;

        webSocketSet.add(this);

        connectAccount.increment();

        log.info("有新的连接接入，当前连接数为{}", connectAccount);

    }

    /**

     * 连接关闭时调用

     */

    @OnClose

    public void onClose() {

        webSocketSet.remove(this);

        connectAccount.decrement();

        log.info("有连接关闭，当前连接数为{}", connectAccount);

    }

    /**

     * 收到客户端消息时调用

     * @param message

     */

    @OnMessage

    public void onMessage(String message) {

        log.info("收到客户端发来的消息,message -> {}", message);

    }

    /**

     * 服务端向客户端发送消息

     * @param message

     */

    public void sendMessage(String message) {

        for (WebSocketService webSocketService : webSocketSet) {

            try {

                log.info("【websocket消息】 广播消息, message={}", message);

                webSocketService.session.getBasicRemote().sendText(message);

            } catch (IOException e) {

                log.info("向客户端发送消息失败, {}", e.getMessage());

            }

        }

    }

}