websocket代码+测试

maven

<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-websocket</artifactId>
</dependency>

WebSocketConfig

package com.new3s.common.framework.socket;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * @Description webSocket 配置类
 * @Date 2022-08-27
 * @Author xie
 */
@Configuration
@EnableWebSocket
public class WebSocketConfig {

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

}

WebSocketServer

package com.new3s.pvinspection.socket;

import com.new3s.common.core.exception.ServiceException;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
import java.util.concurrent.atomic.AtomicInteger;

/**
 * @Description WebSocket 服务
 * @Date 2022-08-27
 * @Author xie
 */
@ServerEndpoint("/websocket/pv/airline/{uid}")
@Component
public class AirlineWebSocketServer {

    private static Logger log = LoggerFactory.getLogger(AirlineWebSocketServer.class);

    private static final AtomicInteger onlineNum = new AtomicInteger(0);

    private static CopyOnWriteArraySet<Session> sessionPools = new CopyOnWriteArraySet<>();

    @OnOpen
    public void onOpen(Session session, @PathParam(value = "uid") String uid) {

        sessionPools.add(session);
        onlineNum.incrementAndGet();
        log.info("{}: 加入到websocket. 当前连接数：{}", uid, onlineNum);

        try {
            sendMessage(session, "WebSocket连接成功");
        } catch (IOException e) {
            log.error("WebSocket IO异常");
        }
    }

    @OnClose
    public void onClose(Session session) {
        sessionPools.remove(session);
        onlineNum.decrementAndGet();
        log.info("有连接关闭, 当前连接数：{}", onlineNum);
    }

    @OnError
    public void onError(Session session, Throwable exception) {
        log.error("连接错误：{}", exception);
        throw new ServiceException(exception.getMessage());
    }

    @OnMessage
    public void onMessage(Session session, String message) {
        log.info("来自客户端的消息:" + message);
        try {
            //sendMessage(session, message);
            broadCastInfo(message);
        } catch (IOException e) {
            e.printStackTrace();
            log.error("发送WebSocket IO异常: {}", e);
        }

    }

    public void sendMessage(Session session, String message) throws IOException {
        if (null != session) {
            synchronized (session) {
                session.getBasicRemote().sendText(message);
            }
        }
    }

    public void broadCastInfo(String message) throws IOException {
        for (Session session : sessionPools) {
            if (session.isOpen()) {
                sendMessage(session, message);
            }
        }
    }

}

websocket测试

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>实时监控</title>
    </head>
    <style>
        .item {
            display: flex;
            border-bottom: 1px solid #000000;
            justify-content: space-between;
            width: 30%;
            line-height: 50px;
            height: 50px;
        }


        .item span:nth-child(2){
            margin-right: 10px;
            margin-top: 15px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #55ff00;
        }
        .nowI{
            background: #ff0000 !important;
        }
</style>
    <body>
        <div id="app">
            <div v-for="item in list" class="item">
                <span>{{item.id}}.{{item.name}}</span>
                <span :class='item.state==-1?"nowI":""'></span>
            </div>
        </div>
    </body>
    <script src="./js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                list: [{
                        id: 1,
                        name: '张三',
                        state: 1
                    },
                    {
                        id: 2,
                        name: '李四',
                        state: 1
                    },
                    {
                        id: 3,
                        name: '王五',
                        state: 1
                    },
                    {
                        id: 4,
                        name: '韩梅梅',
                        state: 1
                    },
                    {
                        id: 5,
                        name: '李磊',
                        state: 1
                    },
                ]
            }
        })


        var webSocket = null;
        if ('WebSocket' in window) {
            //创建WebSocket对象
            webSocket = new WebSocket("ws://localhost:8080/websocket/pv/airline/" + getUUID());


            //连接成功
            webSocket.onopen = function() {
                console.log("已连接");
                webSocket.send("消息发送测试")
            }
            //接收到消息
            webSocket.onmessage = function(msg) {
                //处理消息
                var serverMsg = msg.data;
                var t_id = parseInt(serverMsg)    //服务端发过来的消息，ID，string需转化为int类型才能比较
                for (var i = 0; i < vm.list.length; i++) {
                    var item = vm.list[i];
                    if(item.id == t_id){
                        item.state = -1;
                        vm.list.splice(i,1,item)
                        break;
                    }
                }
            };


            //关闭事件
            webSocket.onclose = function() {
                console.log("websocket已关闭");
            };
            //发生了错误事件
            webSocket.onerror = function() {
                console.log("websocket发生了错误");
            }
        } else {
            alert("很遗憾，您的浏览器不支持WebSocket！")
        }


        function getUUID() {    //获取唯一的UUID
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {


                var r = Math.random() * 16 | 0,
                    v = c == 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
        }
</script>
</html>

posted @ 2022-08-30 11:45 xiexie0812 阅读(190) 评论(0) 编辑收藏举报

刷新页面返回顶部

websocket代码+测试

maven

WebSocketConfig

WebSocketServer

websocket测试

公告