当前位置:   article > 正文

通过使用WebSocket使前后端数据交互_websocket前后端交互

websocket前后端交互

1.对WebSocket的了解

  • WebSocket是一种在单个TCP连接上进行全双工通信的协议

  • WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据

  • 在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

特点

较少的控制开销

更强的实时性

保持连接状态

更好的压缩效果

2.在pom.xml文件中添加WebSocket组件依赖

  1. <!-- WebSocket组件依赖 -->
  2. <dependency>
  3. <groupId>org.springframework.boot</groupId>
  4. <artifactId>spring-boot-starter-websocket</artifactId>
  5. <version>2.7.3</version>
  6. </dependency>

3.使用依赖组件ServerEndpointExporter构建配置类MyWebSocketConfig

  1. @Configuration
  2. public class MyWebSocketConfig {
  3.   @Bean
  4.   public ServerEndpointExporter getServerEndpointExporter(){
  5.       return new ServerEndpointExporter();
  6.   }
  7.   }

4.构建服务类MyWebSocketServer

  1. @Service
  2. @ServerEndpoint("/websocket")//获取前端请求
  3. public class MyWebSocketServer {
  4.   List<Object> list = new ArrayList();
  5.   @OnOpen
  6.   public void onOpen(Session session){
  7.         System.out.println("已经与浏览器端建立连接" + session.getId());
  8.     }
  9.   @OnMessage
  10.   public String onOpen(String info,Session session){
  11.       Map<String,Object> map = new HashMap<>();
  12.       list.add(info);
  13.       map.put("list",list);
  14.       map.put("info",info);
  15.       map.put("sessionID", session.getId());
  16.       System.out.println("前端推送的信息为===========" + info + session.getId());
  17.       return map.toString();
  18.   }
  19. }

5.前端代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <input type="text" id="sent" onchange="test()" placeholder="请输入信息。。。。">
  9. <br>
  10. <br>
  11. <input type="text" id="message" style="width: 800px;height: 50px;">
  12. <script>
  13. let websocket = new WebSocket("ws://127.0.0.1:8080/websocket");
  14. websocket.onopen = function() {
  15. console.log("已经与服务器建立连接。。。。。");
  16. };
  17. websocket.onmessage = function(map) {
  18. document.querySelector("#message").value = map.data;
  19. };
  20. function test(){
  21. let value = document.querySelector("#sent").value;
  22. websocket.send(value);
  23. }
  24. </script>
  25. </body>
  26. </html>

6.运行界面

前端

 后端

 

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/906486
推荐阅读
相关标签
  

闽ICP备14008679号