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

家电维修 2023-07-16 19:17www.caominkang.com家电维修技术

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

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

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

特点

较少的控制开销

更强的实时性

保持连接状态

更好的压缩效果

2.在pom.xml文件中添加WebSocket组件依赖
  
  
   .springframeork.boot
   spring-boot-starter-ebsocket
   2.7.3
  
3.使用依赖组件ServerEndpointExporter构建配置类MyWebSocketConfig
@Configuration
public class MyWebSocketConfig {
    @Bean
    public ServerEndpointExporter getServerEndpointExporter(){
        return ne ServerEndpointExporter();
     }
    }
4.构建服务类MyWebSocketServer
@Service
@ServerEndpoint("/ebsocket")//获取前端请求
public class MyWebSocketServer {
    List list = ne ArrayList();
    @OnOpen
    public void onOpen(Session session){
         System.out.println("已经与浏览器端建立连接" + session.getId());
     }
​
    @OnMessage
    public String onOpen(String info,Session session){
        Map map = ne HashMap<>();
        list.add(info);
        map.put("list",list);
        map.put("info",info);
        map.put("sessionID", session.getId());
        System.out.println("前端推送的信息为===========" + info + session.getId());
        return map.toString();
    }
} 
5.前端代码 


 
  
  
 
 
  
  

​ ​
6.运行界面

前端

 后端

 

 

Copyright © 2016-2025 www.jianfeikang.com 建飞家电维修 版权所有 Power by