WebSocket 简单学习

淡淡的烟草味﹌ 2021-09-28 03:22 348阅读 0赞

## 一、开发环境 ##

java jdk 1.8+

推荐这里的网站学习 webSocket : [http://how2j.cn/p/423][http_how2j.cn_p_423]

## 二、 WebSocket简介 ##

传统的web网站会话中，由客户端发起http请求到服务端，服务端处理信息后返回结果到客户端，这是属于客户端向服务端发起信息请求，如果有一些信息需要实时更新的话，就需要客户端不停的向服务端发起http请求

频繁的向服务端发送请求意味着会造成服务端的压力，那么有没有有一种方式是服务端主动发送信息给客户端呢？ 有，  就是  WebSocket，下面给出基于Springboot2的WebSocket构建步骤。

### **WebSocket 优点** ###

*   节约带宽。 不停地轮询服务端数据这种方式，使用的是http协议，head信息很大，有效数据占比低， 而使用WebSocket方式，头信息很小，有效数据占比高。
 *  无浪费。 轮询方式有可能轮询10次，才碰到服务端数据更新，那么前9次都白轮询了，因为没有拿到变化的数据。 而WebSocket是由服务器主动回发，来的都是新数据。
 *  实时性，考虑到服务器压力，使用轮询方式不可能很短的时间间隔，否则服务器压力太多，所以轮询时间间隔都比较长，好几秒，设置十几秒。 而WebSocket是由服务器主动推送过来，实时性是最高的

三、构建步骤

*  构建springboot2 的web项目，添加pom.xml 里面的webSocket依赖包

<dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-websocket</artifactId>
                <version>2.1.0.RELEASE</version>
            </dependency>

*  启用 WebSocket 的支持

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

*  配置WebSocket的服务，WebSocket可以看成是多开了一个服务，所以需要在服务配置请求的处理方式，有open(接收连接请求处理)，close(关闭连接请求处理)， message(接收消息请求处理)

package com.qingwen.mybatis.configuration;
    
    
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import org.springframework.stereotype.Component;
    import org.springframework.web.bind.annotation.RequestParam;
    
    import javax.websocket.*;
    import javax.websocket.server.PathParam;
    import javax.websocket.server.ServerEndpoint;
    import java.io.IOException;
    import java.util.concurrent.CopyOnWriteArrayList;
    
    @Component
    @ServerEndpoint("/webSocket/{sid}")
    public class WebSocketServer {
    
        private Logger logger = LoggerFactory.getLogger(WebSocketServer.class);
    
        private static int onlineCount = 0; //当前在线人数，需要设置成线程安全
    
        //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
        private static CopyOnWriteArrayList<WebSocketServer> webSocketServers = new CopyOnWriteArrayList<>();
    
        //与某个客户端的连接会话，需要通过它来给客户端发送数据
        private Session session;
    
        private String sid; //接收的sid
    
        /**
         * 与客户端建立连接后执行的方法
         */
        @OnOpen
        public void onOpen(Session session, @PathParam("sid")String sid){
            this.session = session;
            this.sid = sid;
            webSocketServers.add(this); //将客户端信息存放到set集合中
            addOnlineCount(); //在线人数加1
            logger.info("有新的客户端连接了  "+ sid + "  当前在线人数  "+ getOnLineCount());
        }
    
    
        /**
         * 连接关闭后执行的方法
         */
        @OnClose
        public void onClose(){
            webSocketServers.remove(this);
            subOnLineCount();
            logger.info(sid+ "  关闭了连接， 当前在线人数为  "+ getOnLineCount());
        }
    
        /**
         * 接收客户端发送过来的消息
         */
        @OnMessage
        public void onMessage(String message, Session session){
            logger.info("接收来自 " + sid +"  的消息： "+ message);
    
            //群发消息
            webSocketServers.forEach(webSocketServer -> {
                try {
                    webSocketServer.sendMessage(message);
                } catch (IOException e) {
                    e.printStackTrace();
                }
            });
        }
    
    
        /**
         * 连接失败时执行的方法
         * @param session
         * @param error
         */
        @OnError
        public void onError(Session session, Throwable error){
            logger.info("发送错误");
            error.printStackTrace();
        }
    
    
        /**
         * 服务端主动发送消息
         * @param message
         */
        public void sendMessage(String message) throws IOException {
            this.session.getBasicRemote().sendText(message);
        }
    
        private static synchronized void subOnLineCount() {
            WebSocketServer.onlineCount -- ;
        }
    
        private static synchronized int getOnLineCount() {
            return WebSocketServer.onlineCount;
        }
    
        private synchronized static void addOnlineCount() {
            WebSocketServer.onlineCount ++;
        }
    
    
    }

*  网页index.jsp发起WebSocket请求

<html>
    <head>
        <title>WebSocket Test</title>
    </head>
    <body>
    
    
    <input type="text" name="content" value="">
    <button id="btn">点击发送</button>
    
    
    <textarea id="textarea"></textarea>
    
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
    
        var socket;
        if(typeof (WebSocket) == "undefined"){
            console.log("浏览器不支持webSocket");
        }else{
            //实例化webSocket对象，指定服务端地址和端口，建立连接
            socket = new WebSocket("ws://localhost:8080/webSocket/11");
    
            //建立连接后执行事件
            socket.onopen = function(){
                console.log("连接已建立");
            };
    
            //接收服务端消息
            socket.onmessage = function(msg){
                console.log(msg);
                $("#textarea").append(msg.data+"<br />");
            }
    
            //关闭连接执行事件
            socket.onclose = function(){
                console.log("连接已关闭");
            };
    
            socket.onerror = function(){
                console.log("发生了错误");
            }
    
    
            $("#btn").click(function(){
                var content = $("input[name=content]").val();
                socket.send(content);
            });
    
        }
    </script>
    </body>
    </html>

*  启动项目

打开地址访问： localhost:8080/index.jsp

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhd2F3YXdhd2F3YWE_size_16_color_FFFFFF_t_70][]

服务端控制台输出：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhd2F3YXdhd2F3YWE_size_16_color_FFFFFF_t_70 1][]

至此webSocket就完成搭建了

## 三、 nginx 转发webSocket 配置 ##

修改nginx 文件，配置proxy代理转发端口

location / {
        	proxy_pass http://tomcat;
            proxy_http_version 1.1;
            proxy_read_timeout 3600s;
            proxy_redirect off;
            proxy_set_header Upgrade $http_upgrade; 
      		proxy_set_header Connection "upgrade"; 
        	proxy_set_header Host $host:$server_port;
        	proxy_set_header X-Real-IP $remote_addr;
        	proxy_set_header REMOTE-HOST $remote_addr;
        	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

\_上述 proxy\_read\_timeout 为保持连接为3600秒，nginx 默认为60s ，超过这时间连接后自动断开webSocket

WebSocket 需要建立一条隧道来进行连接，

//这三句尤其重要
      proxy_set_header Upgrade $http_upgrade; 
      proxy_set_header Connection "upgrade"; 
      proxy_set_header Host $host:$server_port;

[http_how2j.cn_p_423]: http://how2j.cn/p/423
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhd2F3YXdhd2F3YWE_size_16_color_FFFFFF_t_70]: /images/20210923/389129f4392844edb4f879977929c89a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhd2F3YXdhd2F3YWE_size_16_color_FFFFFF_t_70 1]: /images/20210923/aaa71ec737c64f8db5cb452f9f868f4e.png