简单学习 --＞ WebSocket

websocket

websocket 是应用层协议, 基于传输层Tcp 协议的协议 ;

这个协议可以实现服务器主动给客户端推送信息功能(本身Tcp就可以做到,但是HTTP不行)

websocket报文格式

websocket 和服务器建立连接的过程

首先客户端发送 HTTP请求给服务器 , 请求里包含了一些特殊header , (告诉服务器要不要和我升级成 websocket) ,

服务器也会返回响应给客户端, (同意升级 ) , 这样客户端和服务器就建立了 websocket的连接, 后续就使用 websocket 进行传输;

就跟 HTTP没关系了 ;

websocket 的使用

在java有两种形式使用功能 websocket

使用Tomcat 提供的 websocket.api
使用Spring 提供的 websocket.api

使用websocket 例子

服务器代码(首先引入websocket依赖)
客户端代码(使用js)

服务器

创建类继承TextSocketHandler 类 , 重写主要的4个方法 (TextsocketHandler类,websocket支持文本和二进制,这里这个就代表支持文本的类)
把上面的类注册到Spring(交给Spring管理)
配置路由(关联路径对应上面的创建的websocketHandler 类)

创建websocke类

返回响应

把创建的websocket 类的实例注册到Spring

配置路由

实现接口
注册路径
有@EnableWebsocket

客户端

js的 websocket, 的 send () 发送方法 , 只能发送字符串 , 所有要发送json数据要把json转成json字符串

在处理前端和后端请求可以使用:

JSON.stringify(json数据) : 把json对象转成json字符串

JSON.parse () : 把json字符串转成json

前端使用 js 写 , 和服务器处理的流程一样: 1.连接成功 2. 收到消息 3. 连接异常 ,4. 连接关闭 ;

复制代码

<body>
    <input type="text" id="text">
    <button id="send-button">发送</button>
     <script>
            // 通过js ,创建Websocket对象 ;
            //  创建对象需要有路径 , 就是 websocket 传输消息的路径 , 对应服务器的路径, 就是发送信息给服务器 ;
            // ws : 代表的是 协议名称 , ws 就是websocket
            let websocket = new websocket('ws://127.0.0.1:8080/test') ; 

        //    给 websocket 创建几个 回调函数 ;
        websocket.onopen = function(){
            //  连接建立成功后, 自动调用 ;
            console.log("连接建立成功");
            
        }

        websocket.onmessage = function(e){
        //     收到消息后 ,调用
        //  这里的 e 参数 , 就是 收到的消息 ;
            console.log("收到消息"+e.data);
        }

        websocket.onerror = function(){
            // 链接发生异常时 ,调用
            console.log("连接发生异常");
            
        }

        websocket.onclose = function(){
            // 连接发生关闭后调用
            console.log("连接断开了");
            
        }
        
        // 给上面的 发送按钮,添加一个 发送点击事件, 把消息发送出去;
        let sendButton = document.querySelector("#send-button") ;
        let message = document.querySelector('#text');
        sendButton.onclick = function(){
            // 发送消息 ,前面已经有 websocket , websocket 已经有服务器的信息, 可以直接通过它向服务器发送数据 ;
            //  客户端就不需要会话的概念了 , 只需要知道服务器就行,服务器才需要管理会话 ;
            websocket.send(message.value) ;
        }


     </script>
</body>