美文网首页
srpingboot基于thymeleaf框架的WebSocke

srpingboot基于thymeleaf框架的WebSocke

作者: 黑子_f338 | 来源:发表于2018-10-22 00:48 被阅读0次

    添加pom依赖

    图片.png

    创建配置类WebSockeCongif

    /**
     * Created by xuj on 2018/10/11.
     * 这是websocket的配置类,开启对websocket的支持
     */
    @Configuration
    public class WebSocketConfig {
        @Bean
        public ServerEndpointExporter serverEndpointExporter() {
            return new ServerEndpointExporter();
        }
    }
    

    配置类WebSocketServer

    /**
     * Created by xuj on 2018/10/11.
     * ServerEndpoint自定义访问路径
     */
    @ServerEndpoint("/websocket")
    @Component
    public class WebSocketServer {
        //静态变量,用来记录当前在线连接数。应该把它设计成线程安全的。可选
        private static int onlineCount = 0;
    
        //concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。必须
        private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>();
    
        //与某个客户端的连接会话,需要通过它来给客户端发送数据。必须
        private Session session;
    
        /**
         * 连接建立成功调用的方法
         */
        @OnOpen
        public void onOpen(Session session) {
            this.session = session;
            webSocketSet.add(this);     //加入set中
            addOnlineCount();           //在线数加1
            System.out.println("有新窗口开始监听,当前在线人数为" + getOnlineCount());
            try {
               sendMessage("连接成功");
            } catch (IOException e) {
                System.out.println("WebSocket IO异常");
            }
        }
    
        /**
         * 连接关闭调用的方法
         */
        @OnClose
        public void onClose() {
            webSocketSet.remove(this);  //从set中删除
            subOnlineCount();           //在线数减1
            System.out.println("有连接关闭!当前在线人数为" + getOnlineCount());
        }
    
        /**
         * 收到客户端消息后调用的方法
         *
         * @param message 客户端发送过来的消息
         */
        @OnMessage
        public void onMessage(String message, Session session) {
            System.out.println("收到客户端的信息:" + message);
            //群发消息
            for (WebSocketServer item : webSocketSet) {
                try {
                    item.sendMessage( session.getId()+ message);
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    
        /**
         * @param session
         * @param error
         */
        @OnError
        public void onError(Session session, Throwable error) {
            System.out.println("发生错误");
            error.printStackTrace();
        }
    
        /**
         * 实现服务器主动推送
         */
        public void sendMessage(String message) throws IOException {
            this.session.getBasicRemote().sendText(message);
        }
        /**
         * 群发自定义消息
         */
        public static void sendInfo(String message) throws IOException {
            System.out.println("推送消息内容:" + message);
            for (WebSocketServer item : webSocketSet) {
                try {
                    item.sendMessage(message);
                } catch (IOException e) {
                    continue;
                }
            }
        }
    
        public static synchronized int getOnlineCount() {
            return onlineCount;
        }
    
        public static synchronized void addOnlineCount() {
            WebSocketServer.onlineCount++;
        }
    
        public static synchronized void subOnlineCount() {
            WebSocketServer.onlineCount--;
        }
    }
    

    服务器界面

    <!--服务器界面-->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>服务器</title>
    </head>
    <body>
    <h1>
        <form action="/socket/push" name="loginfrom" accept-charset="utf-8" method="post">
                <textarea id="fuwu" name="fuwu">
    
                </textarea>
                <input type="submit" value="群发" >
        </form>
    </h1>
    </body>
    </html>
    

    客户端界面

    <!--客户端界面-->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>websocket</title>
    </head>
    <body>
    <h2>websocket</h2>
    <h1>服务器端信息显示区</h1>
    <textarea id="fuwu" style="width: 200px; height: 300px">
    
    </textarea>
    <h1>客户信息输入区</h1>
    <textarea id="kehu" style="width: 200px">
    
    </textarea>
    <button onclick="myFirst()">发送</button>
    
    <script>
        function myFirst() {
                socket.send(document.getElementById("kehu").value);
                document.getElementById("kehu").value =null;
        }
        var socket;
        if (typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        } else {
            console.log("您的浏览器支持WebSocket");
            //实现化WebSocket对象,指定要连接的服务器地址与端口建立连接
            socket = new WebSocket("ws://localhost:8080/websocket");
    //        打开事件
            socket.onopen = function () {
                console.log("Socket已打开");
    //            socket.send("这是来自客户端的消息:" + new Date());
            };
            //获得服务器端消息事件
            socket.onmessage = function (msg) {
                console.log(msg.data);
                alert(msg.data);
                document.getElementById("fuwu").value = document.getElementById("fuwu").value+"\n"+ msg.data;
            };
            //关闭事件
            socket.onclose = function () {
                console.log("Socket已关闭");
            };
    
            //发生了错误事件
            socket.onerror = function () {
                alert("Socket发生了错误");
            }
        }
    
    </script>
    
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:srpingboot基于thymeleaf框架的WebSocke

          本文链接:https://www.haomeiwen.com/subject/qzlbaftx.html