SpringBoot整合websocket、nginx配置ws、wss实战记录

绝地灬酷狼 2024-04-08 11:10 79阅读 0赞

#### SpringBoot整合websocket ####

*  一.SpringBoot整合websocket
 *   *  1.导入websocket的依赖
     *  2.websocket的配置
     *  3.建立ServerEndpoint的java类，能够接受客户端发送过来的信息和发送给客户端信息
     *  4.前端页面（测试）
     *  5.建立ServerEndpoint的java类，能够接受客户端发送过来的信息和发送给客户端信息
 *  二.nginx配置ws、wss
 *  三.成功样式

--------------------

## 一.SpringBoot整合websocket ##

### 1.导入websocket的依赖 ###

代码如下（示例）：

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

### 2.websocket的配置 ###

import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.socket.server.standard.ServerEndpointExporter;
    
    /**
     * websocket的配置
     */
    @Configuration
    public class WebSocketStompConfig{
        
        @Bean
        public ServerEndpointExporter serverEndpointExporter()
        {
        
            return new ServerEndpointExporter();
        }
    }

### 3.建立ServerEndpoint的java类，能够接受客户端发送过来的信息和发送给客户端信息 ###

import com.alibaba.fastjson.JSON;
    import com.alibaba.fastjson.JSONObject;
    import com.google.common.collect.Maps;
    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.Map;
    import java.util.Set;
    import java.util.concurrent.ConcurrentHashMap;
    
    @Component
    @ServerEndpoint("/wss/websocket/{username}")
    public class WebSocket {
        
    
        /**
         * 在线人数
         */
        public static int onlineNumber = 0;
        /**
         * 以用户的姓名为key，WebSocket为对象保存起来
         */
        private static Map<String, WebSocket> clients = new ConcurrentHashMap<String, WebSocket>();
        /**
         * 会话
         */
        private Session session;
        /**
         * 用户名称
         */
        private String username;
        /**
         * 建立连接
         *
         * @param session
         */
        @OnOpen
        public void onOpen(@PathParam("username") String username, Session session)
        {
        
            onlineNumber++;
    
            this.username = username;
            this.session = session;
    
            try {
        
                //messageType 1代表上线 2代表下线 3代表在线名单 4代表普通消息
                //先给所有人发送通知，说我上线了
                Map<String,Object> map1 = Maps.newHashMap();
                map1.put("messageType",1);
                map1.put("username",username);
                sendMessageAll(JSON.toJSONString(map1),username);
    
                //把自己的信息加入到map当中去
                clients.put(username, this);
                //给自己发一条消息：告诉自己现在都有谁在线
                Map<String,Object> map2 = Maps.newHashMap();
                map2.put("messageType",3);
                //移除掉自己
                Set<String> set = clients.keySet();
                map2.put("onlineUsers",set);
                sendMessageTo(JSON.toJSONString(map2),username);
            }
            catch (IOException e){
        
    
            }
    
    
    
        }
    
        @OnError
        public void onError(Session session, Throwable error) {
        
    
            //error.printStackTrace();
        }
        /**
         * 连接关闭
         */
        @OnClose
        public void onClose()
        {
        
            onlineNumber--;
            //webSockets.remove(this);
            clients.remove(username);
            try {
        
                //messageType 1代表上线 2代表下线 3代表在线名单  4代表普通消息
                Map<String,Object> map1 = Maps.newHashMap();
                map1.put("messageType",2);
                map1.put("onlineUsers",clients.keySet());
                map1.put("username",username);
                sendMessageAll(JSON.toJSONString(map1),username);
            }
            catch (IOException e){
        
    
            }
    
        }
    
        /**
         * 收到客户端的消息
         *
         * @param message 消息
         * @param session 会话
         */
        @OnMessage
        public void onMessage(String message, Session session)
        {
        
            try {
        
    
                JSONObject jsonObject = JSON.parseObject(message);
                String textMessage = jsonObject.getString("message");
                String fromusername = jsonObject.getString("username");
                String tousername = jsonObject.getString("to");
                //如果不是发给所有，那么就发给某一个人
                //messageType 1代表上线 2代表下线 3代表在线名单  4代表普通消息
                Map<String,Object> map1 = Maps.newHashMap();
                map1.put("messageType",4);
                map1.put("textMessage",textMessage);
                map1.put("fromusername",fromusername);
                if(tousername.equals("All")){
        
                    map1.put("tousername","所有人");
                    sendMessageAll(JSON.toJSONString(map1),fromusername);
                }
                else{
        
                    map1.put("tousername",tousername);
                    sendMessageTo(JSON.toJSONString(map1),tousername);
                }
            }
            catch (Exception e){
        
    
            }
    
        }
    
    
        public void sendMessageTo(String message, String ToUserName) throws IOException {
        
            for (WebSocket item : clients.values()) {
        
                if (item.username.equals(ToUserName) ) {
        
                    item.session.getAsyncRemote().sendText(message);
                    break;
                }
            }
        }
    
        public void sendMessageAll(String message,String FromUserName) throws IOException {
        
            for (WebSocket item : clients.values()) {
        
                item.session.getAsyncRemote().sendText(message);
            }
        }
    
        public static synchronized int getOnlineCount() {
        
            return onlineNumber;
        }
    
    }

### 4.前端页面（测试） ###

> 说明：前后端分离只需提供给前端> **wss://此处自己的域名/wss/websocket/xxx**  
> xxx为唯一标识

<!DOCTYPE html>
    <html>
    <head>
        <title>websocket</title>
        <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
        <script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
        <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    </head>
    
    <body>
    <div style="margin: auto;text-align: center">
        <h1>Welcome to websocket</h1>
    </div>
    <br/>
    <div style="margin: auto;text-align: center">
        <select id="onLineUser">
            <option>--所有--</option>
        </select>
        <input id="text" type="text" />
        <button onclick="send()">发送消息</button>
    </div>
    <br>
    <div style="margin-right: 10px;text-align: right">
        <button onclick="closeWebSocket()">关闭连接</button>
    </div>
    <hr/>
    <div id="message" style="text-align: center;"></div>
    <input  type="text" th:value="${username}" id="username" style="display: none" />
    </body>
    
    
    <script type="text/javascript">
        var webSocket;
        var commWebSocket;
        if ("WebSocket" in window)
        {
        
            webSocket = new WebSocket("wss://此处自己的域名/wss/websocket/"+document.getElementById('username').value);
            // webSocket = new WebSocket("ws://127.0.0.1:8088/api/websocket/"+document.getElementById('username').value);
            // webSocket = new WebSocket("wss://localhost/api/websocket/"+document.getElementById('username').value);
            
    
    
    
            //连通之后的回调事件
            webSocket.onopen = function()
            {
        
                //webSocket.send( document.getElementById('username').value+"已经上线了");
                console.log("已经连通了websocket");
                setMessageInnerHTML("已经连通了websocket");
            };
    
            //接收后台服务端的消息
            webSocket.onmessage = function (evt)
            {
        
                var received_msg = evt.data;
                console.log("数据已接收:" +received_msg);
                var obj = JSON.parse(received_msg);
                console.log("可以解析成json:"+obj.messageType);
                //1代表上线 2代表下线 3代表在线名单 4代表普通消息
                if(obj.messageType==1){
        
                    //把名称放入到selection当中供选择
                    var onlineName = obj.username;
                    var option = "<option>"+onlineName+"</option>";
                    $("#onLineUser").append(option);
                    setMessageInnerHTML(onlineName+"上线了");
                }
                else if(obj.messageType==2){
        
                    $("#onLineUser").empty();
                    var onlineName = obj.onlineUsers;
                    var offlineName = obj.username;
                    var option = "<option>"+"--所有--"+"</option>";
                    for(var i=0;i<onlineName.length;i++){
        
                        if(!(onlineName[i]==document.getElementById('username').value)){
        
                            option+="<option>"+onlineName[i]+"</option>"
                        }
                    }
                    $("#onLineUser").append(option);
    
                    setMessageInnerHTML(offlineName+"下线了");
                }
                else if(obj.messageType==3){
        
                    var onlineName = obj.onlineUsers;
                    var option = null;
                    for(var i=0;i<onlineName.length;i++){
        
                        if(!(onlineName[i]==document.getElementById('username').value)){
        
                            option+="<option>"+onlineName[i]+"</option>"
                        }
                    }
                    $("#onLineUser").append(option);
                    console.log("获取了在线的名单"+onlineName.toString());
                }
                else{
        
                    setMessageInnerHTML(obj.fromusername+"对"+obj.tousername+"说："+obj.textMessage);
                }
            };
    
            //连接关闭的回调事件
            webSocket.onclose = function()
            {
        
                console.log("连接已关闭...");
                setMessageInnerHTML("连接已经关闭....");
            };
        }
        else{
        
            // 浏览器不支持 WebSocket
            alert("您的浏览器不支持 WebSocket!");
        }
        //将消息显示在网页上
        function setMessageInnerHTML(innerHTML) {
        
            document.getElementById('message').innerHTML += innerHTML + '<br/>';
        }
    
        function closeWebSocket() {
        
            //直接关闭websocket的连接
            webSocket.close();
        }
    
        function send() {
        
            var selectText = $("#onLineUser").find("option:selected").text();
            if(selectText=="--所有--"){
        
                selectText = "All";
            }
            else{
        
                setMessageInnerHTML(document.getElementById('username').value+"对"+selectText+"说："+ $("#text").val());
            }
            var message = {
        
                "message":document.getElementById('text').value,
                "username":document.getElementById('username').value,
                "to":selectText
            };
            webSocket.send(JSON.stringify(message));
            $("#text").val("");
    
        }
    </script>
    
    </html>

### 5.建立ServerEndpoint的java类，能够接受客户端发送过来的信息和发送给客户端信息 ###

跳转到websocket页面上去

@Controller
    @RequestMapping("/api")
    public class WebsocketController {
        
    
        @RequestMapping("/websocket/{name}")
        public String webSocket(@PathVariable String name, Model model){
        
            try{
        
                model.addAttribute("username",name);
                return "websocket";
            }
            catch (Exception e){
        
    
                return "error";
            }
        }
    
    
    }

> 到此，本地SpringBoot整合websocket已结束，可先自我测试，如需服务器部署，可参考以下

--------------------

## 二.nginx配置ws、wss ##

> 说明：  
> WebSockets应用程序会在客户端和服务器之间建立一个长连接，使得开发实时应用很容易。HTTP的Upgrade协议头机制用于将连接从HTTP连接升级到WebSocket连接，Upgrade机制使用了Upgrade协议头和Connection协议头。反向代理服务器在支持WebSocket协议方面面临着一些挑战。挑战之一是WebSocket是一个逐段转发（hop-by-hop）协议，因此当代理服务器拦截到来自客户端的Upgrade请求时，代理服务器需要将自己的Upgrade请求发送给后端服务器，包括适合的请求头。而且，由于WebSocket连接是长连接，与传统的HTTP端连接截然不同，故反向代理服务器还需要允许这些连接处于打开（Open）状态，而不能因为其空闲就关闭了连接。  
> Nginx通过在客户端和后端服务器之间建立隧道来支持WebSockets通信。为了让Nginx可以将来自客户端的Upgrade请求发送到后端服务器，Upgrade和Connection的头信息必须被显式的设置

map $http_upgrade $connection_upgrade {
        
            default upgrade;
            '' close;
    }
    
    
    
    server
    {
        
    listen 443 ssl;
        listen 80;
        server_name 自己的域名;
        index index.html;
    
    ssl_certificate   /usr/local/nginx/conf/cert/自己的https证书.pem;
        ssl_certificate_key  /usr/local/nginx/conf/cert/自己的https证书.key;
    ssl_session_timeout 10m;
     
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;
     
           location /{
        
          proxy_pass http://127.0.0.1:8088/;
          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection "upgrade";
        }
        
    
    }

一旦我们完成以上设置，Nginx就可以处理WebSocket连接了。  
![在这里插入图片描述][35d01fef221a4954b0cca00fd49f2789.jpeg]

--------------------

## 三.成功样式 ##

域名访问如下：  
![fce76d4df8694344a7482c328d7a9fbf.png_pic_center][]  
![在这里插入图片描述][c248e8df2b8f46008c7ce55d61d519ce.png_pic_center]  
ip访问如下：  
![在这里插入图片描述][2ec7e21c6f1d4c598f68150e868d2077.png_pic_center]

> 到此结束

[35d01fef221a4954b0cca00fd49f2789.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/9d9d50032f0e40b1bae7fd5ca10234c4.jpeg
[fce76d4df8694344a7482c328d7a9fbf.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/e9a70a971c124547bd66df811fa4e124.png
[c248e8df2b8f46008c7ce55d61d519ce.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/e48f14a0fdf54d4580b360914ea0f896.png
[2ec7e21c6f1d4c598f68150e868d2077.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/db539cf805da4bd1a34fc80e30acf791.png