赞
踩
WebSocket是一种在单个TCP连接上进行全双工通信的协议
WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据
在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
特点
较少的控制开销
更强的实时性
保持连接状态
更好的压缩效果
- <!-- WebSocket组件依赖 -->
- <dependency>
- <groupId>org.springframework.boot</groupId>
- <artifactId>spring-boot-starter-websocket</artifactId>
- <version>2.7.3</version>
- </dependency>
- @Configuration
- public class MyWebSocketConfig {
- @Bean
- public ServerEndpointExporter getServerEndpointExporter(){
- return new ServerEndpointExporter();
- }
- }
- @Service
- @ServerEndpoint("/websocket")//获取前端请求
- public class MyWebSocketServer {
- List<Object> list = new ArrayList();
- @OnOpen
- public void onOpen(Session session){
- System.out.println("已经与浏览器端建立连接" + session.getId());
- }
-
- @OnMessage
- public String onOpen(String info,Session session){
- Map<String,Object> map = new 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();
- }
- }

- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title></title>
- </head>
- <body>
- <input type="text" id="sent" onchange="test()" placeholder="请输入信息。。。。">
- <br>
- <br>
- <input type="text" id="message" style="width: 800px;height: 50px;">
-
- <script>
- let websocket = new WebSocket("ws://127.0.0.1:8080/websocket");
- websocket.onopen = function() {
- console.log("已经与服务器建立连接。。。。。");
- };
- websocket.onmessage = function(map) {
- document.querySelector("#message").value = map.data;
- };
-
- function test(){
- let value = document.querySelector("#sent").value;
- websocket.send(value);
- }
- </script>
- </body>
- </html>
-

前端
后端
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。