WebScoket技术讲解

本文详细介绍了WebSocket技术的诞生背景、本质、特点,以及如何在Vue和SpringBoot中实现WebSocket服务。重点强调了WebSocket的实时性和协议特性,以及与HTTP的区别。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.写在前面        

        本篇将为您讲解WebScoket技术,我将从WebScoket的诞生背景,本质,特点,实现的角度来为大家一一讲解。由于本人也是一枚编程小白,因此该篇是经过大量的资料融合加上本人的对WebSocket的实际应用,尽可能从初学者的角度将WebSocket技术讲的通俗易懂。


2.诞生背景

        在WebSocket诞生之前,网站为了实现推送技术(服务端向客户端发送消息)大多采用的方法就是轮询。什么是轮询? 轮询就是客户端每隔一段时间向服务端发送一次HTTP 请求,然后服务器将处理好的数据返回给客户端。大家可以发现,轮询的本质依然是客户端在调用服务端

补充:轮询分为短轮询和长轮询,大家可自行查阅二者区别

3.本质

        WebScoket的本质是一种协议,他与HTTP协议性质是相同的,只不过他们的特点不同,应用场景也不同。为什么说他是一种协议,大家看以一下下面的两张图便可以明白。

4.特点

        经过上面的WebScoket背景与本质部分,我们可以看出WebScoket的其中一个特点是,可以实现服务端主动给客户端下发数据的业务功能,这也是我认为WebScoket的最大特点。

其次WebScoket还有以下特点:

1.较少的控制开销:在连接创建后,服务器和客户端之间交换数据时,用于协议控制的数据包头部相对较小;

2.更强的实时性:由于协议是全双工的,所以服务器可以随时主动给客户端下发数据。相对于 HTTP 请求需要等待客户端发起请求服务端才能响应,延迟明显更少;

3.保持连接状态:与 HTTP 不同的是,WebSocket 需要先创建连接,这就使得其成为一种有状态的协议,之后通信时可以省略部分状态信息;

4.更好的二进制支持:WebSocket 定义了二进制帧,相对 HTTP,可以更轻松地处理二进制内容;

5.可以支持扩展:WebSocket 定义了扩展,用户可以扩展协议、实现部分自定义的子协议。

5.实现(Vue + SpringBoot)

        1.vue部分

<template>
<button @click="webclick">给后台发送消息</button>
</template>
​
<script>
export default {
    name: "web2",
    data() {
        return {
            ws: null
        }
    },
    created() {
        //连接WebSocket服务端,然后初始化监听事件
        this.ws = new WebSocket("ws://localhost:8087/websocket/test");
        this.initWebSocket();
​
    },
    destroyed() {
      // 离开路由之后断开websocket连接
      this.setOncloseMessage() 
    },
    methods: {
      //连接websocket,用于接收后台实时消息推送
      initWebSocket() {
          // 连接错误
          this.ws.onerror = this.setErrorMessage
          // 连接成功
          this.ws.onopen = this.setOnopenMessage
          // 收到消息的回调
          this.ws.onmessage = this.setOnmessageMessage
          // 连接关闭的回调
          this.ws.onclose = this.setOncloseMessage
          // 监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口
          window.onbeforeunload = this.onbeforeunload
      },
      setErrorMessage() {
          console.log('WebSocket连接发生错误-状态码:' + this.ws.readyState)
          console.log(this.websocket)
      },
      setOnopenMessage() {
          console.log('WebSocket连接成功-状态码:' + this.ws.readyState)
          console.log(this.websocket)
      },
      setOnmessageMessage(event) {
          // 根据服务器推送的消息做自己的业务处理
          console.log(this.websocket)
          console.log('服务端返回:' + event)
          const result = JSON.parse(event.data)
          console.log(result)
      },
      setOncloseMessage() {
        console.log('WebSocket连接关闭    状态码:' + this.websocket.readyState)
      }
    }
}
</script>

        2.SpringBoot部分

依赖

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

配置类:该类是为了配置ServerEndpointExporter去查找带有@ServerEndPoint注解的服务类。

/**
 * WebScoket配置类
 */
@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
	
}

服务类

@Component
//此注解相当于设置访问URL
@ServerEndpoint("/websocket/{userName}")
public class WebSocket {

	private final static Logger log = LoggerFactory.getLogger("websocketLog");

	private Session session;

	private static CopyOnWriteArraySet<WebSocket> webSockets = new CopyOnWriteArraySet<>();

	private static Map<String, List<Session>> sessionPool = new HashMap<String, List<Session>>();

	@OnOpen
	public void onOpen(Session session, @PathParam(value = "userName") String userName) {
		this.session = session;
		webSockets.add(this);

		if(sessionPool.get(userName) == null) {
			List<Session> userList = new ArrayList<Session>();
			userList.add(session);
			sessionPool.put(userName, userList);
		} else {
			sessionPool.get(userName).add(session);
		}
		System.out.println(userName + "【websocket消息】有新的连接,总数为:" + webSockets.size());
	}

	@OnClose
	public void onClose(Session session, @PathParam(value = "userName") String userName) {
		webSockets.remove(this);
		if(sessionPool.get(userName).size() <= 1) {
			sessionPool.remove(userName);
		} else {
			sessionPool.get(userName).remove(session);
		}
		System.out.println( "【websocket消息】连接断开,总数为:" + webSockets.size() );
	}

	@OnMessage
	public void onMessage(String message) {
		System.out.println("【websocket消息】收到客户端消息:" + message);
	}

	// 此为广播消息
	public void sendAllMessage(String message) {
		for (WebSocket webSocket : webSockets) {
			try {
				webSocket.session.getAsyncRemote().sendText(message);
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
	}

	// 此为单点消息
	public void sendOneMessage(String userName, String message) {
		List<Session> sessionList = sessionPool.get(userName);
		if(sessionList != null) {
			sessionList.forEach(item -> {
				try {
					if (item != null) {
						item.getAsyncRemote().sendText(message);
					}
				} catch (Exception e) {
					e.printStackTrace();
				}
			});
		}
	}
}

        其实,WebSocket的实现就是固定的格式,只是会有业务代码的差异,大家真正做过一遍后就很容易理解了。


        6.写在最后

        该篇文章是在作者本人对WebScoket理解的基础上进行整理,如有问题欢迎大家指出,万分感谢。

=============stay hungry stay foolish=============

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值