简单学习 --＞ 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>