Web Socket简单尝试,实现服务器向客户端的主动消息推送 ...

打印 上一主题 下一主题

主题 974|帖子 974|积分 2922

使用Web Socket的缘故原由

  首先,在常规情况下,我们使用的接口是http协议,在这种情况下,只有客户端向服务器发送请求的情况下,服务器才能向客户端发送消息。但是在一些特别场景下,服务器是须要向客户端主动发送消息,例如谈天、推送信息等功能。
在这种情况下我们就须要用到Web Socket来实现我们的需求,Web Socket是全双工通讯,答应客户端和服务器同时举行数据发送和接收,这使得交互更加高效。
原理:

  • 握手:WebSocket首先通过HTTP协议举行握手,乐成后会升级为WebSocket协议。
  • 数据传输:毗连建立后,客户端和服务器可以自由地交换信息,直到某一方主动关闭毗连。
   工作过程:

  1. 握手过程

WebSocket的毗连是通过HTTP协议举行握手的。这个过程包罗以下几个步调:


  • 客户端发起请求:客户端发送一个HTTP请求到服务器,请求升级到WebSocket协议。这个请求包含一些特别的头部字段(具体可以看Web Socket协议)
  • 服务器相应:如果服务器支持WebSocket协议,它会返回一个HTTP 101状态码,表示协议切换。相应头中也会包含一些信息。
2. 建立长期毗连

一旦握手乐成,WebSocket会在客户端和服务器之间建立一个长期的TCP毗连。这意味着在这个毗连建立后,数据可以随时从客户端发送到服务器,反之亦然,而不须要重新建立毗连。
3. 数据传输

WebSocket使用帧(frames)来传输数据。数据帧的格式相对简单,包含:


  • 帧头:指示帧的范例(文本帧、二进制帧、关闭帧等)。
  • 有效载荷:现实要传输的数据。
WebSocket答应消息在两端同时运动,双方可以随时发送消息。
4. 关闭毗连

当一方要关闭毗连时,会发送一个关闭帧,包罗一个状态码(如1000表示正常关闭)。另一方收到后也会发送一个关闭帧,完成关闭操作。
   个人的简单实现
   本文章的实现仅为个人的见解,如有谬误请指正
第一步建立一个SpringBoot项目

SpringBoot中提供了Web Socket插件,我们可以直接使用这个

在这里我们使用了Lombok、Spring Web、WebSocket
创建包

名字可以自己起,只要自己找得到就行
编写两个类,
第一个类继承TextWebSocketHandler类,这个类重要用来实现类中的方法
  1. import org.springframework.web.socket.CloseStatus;
  2. import org.springframework.web.socket.TextMessage;
  3. import org.springframework.web.socket.WebSocketSession;
  4. import org.springframework.web.socket.handler.TextWebSocketHandler;
  5. /**
  6. * @Author: 百花杀
  7. * @Motto: LESS TALKING、MORE BUILDING、MORE THINkING
  8. * @Date: 2024/11/26/16:19
  9. */
  10. public class MyWebSocketHandler extends TextWebSocketHandler {
  11.     @Override
  12. //    这个方法是WebSocket连接建立成功后调用,在这里可以做一些初始化操作
  13.     public void afterConnectionEstablished(WebSocketSession session) throws Exception {
  14.         System.out.println("Web Socket 连接session : " + session.getId() + " 连接成功");
  15.     }
  16.     @Override
  17. //    这个方法是处理WebSocket消息的,在这里可以接收客户端发送的消息并进行处理
  18.     public void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
  19.         // 处理接收到的消息
  20.         String incomingMessage = message.getPayload();
  21.         System.out.println("接收到的消息:" + incomingMessage);
  22.         // 回复消息
  23.         session.sendMessage(new TextMessage("服务器接收到消息: " + incomingMessage + " 这是服务器返回的消息: 百花杀"));
  24.     }
  25.     @Override
  26. //    这个方法是WebSocket连接关闭时调用,在这里可以做一些清理操作
  27.     public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
  28.         System.out.println("Web Socket 连接session : " + session.getId() + " 连接关闭");
  29.     }
  30. }
复制代码
这样我们就实现了处理类,接下来我们来实现设置类,设置类须要实现WebSocketConfigurer接口
  1. import org.springframework.context.annotation.Configuration;
  2. import org.springframework.web.socket.config.annotation.EnableWebSocket;
  3. import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
  4. import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
  5. /**
  6. * @Author: 百花杀
  7. * @Motto: LESS TALKING、MORE BUILDING、MORE THINkING
  8. * @Date: 2024/11/26/16:19
  9. */
  10. @Configuration
  11. @EnableWebSocket
  12. public class WebSocketConfig implements WebSocketConfigurer {
  13.     @Override
  14.     // 这里我们注册了一个MyWebSocketHandler,它是WebSocketHandler的一个实现类,负责处理WebSocket请求。
  15.     // 本例中,websocket请求路径为/WEBSOCKET/ws,setAllowedOrigins("*")表示允许所有来源的WebSocket请求,可以不用处理跨域问题。
  16.     public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
  17.         registry.addHandler(myWebSocketHandler(), "/WEBSOCKET/ws").setAllowedOrigins("*");
  18.     }
  19.     public MyWebSocketHandler myWebSocketHandler() {
  20.         return new MyWebSocketHandler();
  21.     }
  22. }
复制代码
这样的话我们就实现了服务器的基础设置,接下来是前端部门:
我使用的是Vue2来实现这个功能
  1. <template>
  2.   <div>
  3.     <h1>WebSocket</h1>
  4.     <el-form :inline="true">
  5.       <el-form-item label="WebSocket URL">
  6.         <el-input v-model="message"></el-input>
  7.       </el-form-item>
  8.       <el-form-item>
  9.         <el-button type="primary" @click="connect">发送</el-button>
  10.       </el-form-item>
  11.     </el-form>
  12.     <el-table :data="messages" style="width: 100%">
  13.       <el-table-column prop="message" label="Message"></el-table-column>
  14.     </el-table>
  15.   </div>
  16. </template>
  17. <script>
  18.   export default {
  19.     name: 'WebSocket',
  20.     data() {
  21.       return {
  22.         message: '',
  23.         messages: []
  24.       }
  25.     },
  26.     methods: {
  27.       connect() {
  28.         const ws = new WebSocket('ws://localhost:8080/WEBSOCKET/ws')
  29.         ws.onopen = () => {
  30.           console.log('WebSocket connected')
  31.           ws.send(this.message)
  32.           ws.onmessage = (event) => {
  33.             console.log('接收到的信息', event.data)
  34.             this.messages.push({message: event.data})
  35.           }
  36.         }
  37.       },
  38.     }
  39.   }
  40. </script>
  41. <style>
  42. </style>
复制代码
 接下来我们启动页面举行测试

前端将服务器返回的的数据举行了展示,我们可以检察服务器的状态

目前我们实现了简单的web Socket毗连

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

天空闲话

金牌会员
这个人很懒什么都没写!
快速回复 返回顶部 返回列表