【websocket一】Websocket是什么springboot mvc下搭建websocketdemo

淩亂°似流年 2023-06-21 15:29 5阅读 0赞

## websocket是什么 ##

WebSocket提供了一种标准的方式，建立客户端和服务器之间全双工、双向的的TCP连接通道。websocket基于http协议，默认使用80 和443端口。

## WebSocket和Http的区别 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70]  
1，websocket是基于http协议的，用到了http的header字段，Upgrade

在成功握手后，websocket并不返回200状态吗，而是在upgrade保持联通，让客户端和服务器能够互相通信。

服务器后端支持websocket的upgrade 请求才能支持socket通信。后面会基于springboot实现这个过程。

2，Http和websocket最大的不同在于。http是基于request-response模式，每一次需要客户端主动发起request请求，服务端返回一个响应数据，你说一句我干一件事。客户端不请求，服务端不能主动联系客户端。websocket在建立连接后，就像拨通了电话，双方可以随时互相通信。这种模式最大的好处是不需要频繁建立tcp连接，可以减少资源消耗。

3，STOMP 是必websocket高级的协议，可以让你实现点对点的通信。可以在两点之间建立channel，两个点可以彼此通信，而不需要广播给所有人。

SpringMVC下的websocket参考  
https://docs.spring.io/spring/docs/5.2.2.RELEASE/spring-framework-reference/web.html\#websocket

## springboot mvc下搭建websocketdemo ##

### pom文件引入依赖 ###

<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
            <version>2.1.11.RELEASE</version>
        </dependency>
        
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.41</version>
        </dependency>
    
    </dependencies>

剩下只需要一个配置文件，一个后端代码，一个前端代码，其他不需要

### 配置文件 ###

/**
     * Spring MVC 配置
     */
    @Configuration
    public class WebMvcConfig implements WebMvcConfigurer {
    
        private final Logger logger = LoggerFactory.getLogger(WebMvcConfig.class);
    
        //服务器支持跨域
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOrigins("*")
                    .allowedMethods("GET", "POST","OPTIONS")
                    .allowedHeaders("*")
                    .exposedHeaders("Access-Control-Allow-Headers",
                            "Access-Control-Allow-Methods",
                            "Access-Control-Allow-Origin",
                            "Access-Control-Max-Age",
                            "X-Frame-Options")
                    .allowCredentials(false)
                    .maxAge(3600);
        }
    
    
        /**
         * The bean shown in the preceding example registers any @ServerEndpoint
         * annotated beans with the underlying WebSocket container. When deployed to a
         * standalone servlet container, this role is performed by a servlet container
         * initializer, and the ServerEndpointExporter bean is not required.
         *
         * @return
         * 在Spring中可以直接使用Java WebSocket API来提供服务，如果使用内置的web容器，需要做的仅仅是需要在下面添加
         */
        /** 注入ServerEndpointExporter，这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint 。
         * 要注意，如果使用独立的servlet容器，而不是直接使用springboot的内置容器，就不要注入ServerEndpointExporter，因为它将由容器自己提供和管理。*/
        @Bean
        public ServerEndpointExporter serverEndpointExporter() {
            return new ServerEndpointExporter();
        }
    
    }

### java后端代码 ###

package com.websocket;
    
    import com.alibaba.fastjson.JSON;
    import com.alibaba.fastjson.JSONObject;
    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.HashMap;
    import java.util.Map;
    import java.util.Set;
    import java.util.concurrent.ConcurrentHashMap;
    
    /**
     * @author 2018年5月18日16:11:48
     */
    @Component
    @ServerEndpoint("/websocket/{username}")
    public class WebSocket {
        private Logger logger = LoggerFactory.getLogger(this.getClass());
        /**
         * 在线人数
         */
        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++;
            logger.info("现在来连接的客户id："+session.getId()+"用户名："+username);
            this.username = username;
            this.session = session;
            logger.info("有新连接加入！ 当前在线人数" + onlineNumber);
            try {
                //messageType 1代表上线 2代表下线 3代表在线名单 4代表普通消息
                //先给所有人发送通知，说我上线了
                Map<String,Object> map1 = new HashMap();
                map1.put("messageType",1);
                map1.put("username",username);
                sendMessageAll(JSON.toJSONString(map1),username);
    
                //把自己的信息加入到map当中去
                clients.put(username, this);
                //给自己发一条消息：告诉自己现在都有谁在线
                Map<String,Object> map2 =  new HashMap();
                map2.put("messageType",3);
                //移除掉自己
                Set<String> set = clients.keySet();
                map2.put("onlineUsers",set);
                sendMessageTo(JSON.toJSONString(map2),username);
            }
            catch (IOException e){
                logger.info(username+"上线的时候通知所有人发生了错误");
            }
    
    
    
        }
    
        @OnError
        public void onError(Session session, Throwable error) {
            logger.info("服务端发生了错误"+error.getMessage());
            //error.printStackTrace();
        }
        /**
         * 连接关闭
         */
        @OnClose
        public void onClose()
        {
            onlineNumber--;
            //webSockets.remove(this);
            clients.remove(username);
            try {
                //messageType 1代表上线 2代表下线 3代表在线名单  4代表普通消息
                Map<String,Object> map1 = new HashMap();
                map1.put("messageType",2);
                map1.put("onlineUsers",clients.keySet());
                map1.put("username",username);
                sendMessageAll(JSON.toJSONString(map1),username);
            }
            catch (IOException e){
                logger.info(username+"下线的时候通知所有人发生了错误");
            }
            logger.info("有连接关闭！ 当前在线人数" + onlineNumber);
        }
    
        /**
         * 收到客户端的消息
         *
         * @param message 消息
         * @param session 会话
         */
        @OnMessage
        public void onMessage(String message, Session session)
        {
            try {
                logger.info("来自客户端消息：" + message+"客户端的id是："+session.getId());
                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 = new HashMap();
                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){
                logger.info("发生了错误了");
            }
    
        }
    
    
        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;
        }
    
    }

### 前端代码 ###

前后端分离的，前端代码找个html空文件粘贴进去用浏览器运行即可。new webSocket的ip更换成自己的

<!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 type="button" onclick="send()">发送消息</button>
    		
        </div>
        <br>
        <div style="margin-right: 10px;text-align: right">
    		<button type="button" onclick="closeWebSocket()">关闭连接</button>
        </div>
        <hr/>
        <div id="message" style="text-align: center;"></div>
        
    <script type="text/javascript">
        var webSocket;
        var commWebSocket;
    	var username;
        if ("WebSocket" in window)
        {
    		username="test"+Math.ceil(Math.random()*10);
    		setMessageInnerHTML("当前登录用户是:"+username);
            // webSocket = new WebSocket("ws://localhost:80/gate-way/websocket/test");
            webSocket = new WebSocket("ws://172.16.11.67:80/gate-way/websocket/"+username );
     
            //连通之后的回调事件
            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]==username)){
                            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]==username)){
                            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() {
    		alert("aa")
            var selectText = $("#onLineUser").find("option:selected").text();
            if(selectText=="--所有--"){
                selectText = "All";
            }
            else{
                setMessageInnerHTML(username+"对"+selectText+"说："+ $("#text").val());
            }
            var message = {
                "message":document.getElementById('text').value,
                "username":username,
                "to":selectText
            };
            webSocket.send(JSON.stringify(message));
            $("#text").val("");
     
        }
    </script>
     </body>
    </html>

## 代码解释 ##

WebSocket 事件

以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象：  
事件 事件处理程序 描述  
open Socket.onopen 连接建立时触发  
message Socket.onmessage 客户端接收服务端数据时触发  
error Socket.onerror 通信发生错误时触发  
close Socket.onclose 连接关闭时触发

WebSocket 方法

以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象：  
方法 描述  
Socket.send() 使用连接发送数据  
Socket.close() 关闭连接

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191213145023200.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ==,size_16,color_FFFFFF,t_70