websocket理解和使用

73 阅读3分钟

一、什么是WebSoket?

定义

WebSocket 是 html5 新增的一种协议,是一种网络通信协议。WebSocket协议不是一种全新的协议,而是利用 HTTP协议来建立的一种协议。

特点

websocket连接最大的特点就是服务器可以主动向客户端发送消息,客户端也可以向服务器端发送消息,是真正平等的对话

WebSocket适用场景包括实时聊天应用、股票行情推送、实时协作编辑、多人游戏、实时数据监控等需要实时双向通信的场景。

其他的特点如下:

  • 建立在 tcp 协议之上,服务器端的实现比较容易

  • 与 http具有良好的兼容性,能够通过各种 http 代理服务器

  • 数据格式比较轻,性能开销小

  • 可以发送文本,也可以发送二进制数据

  • 没有同源策略的限制,客户端可以向任意服务器通信

  • 协议标识是 ws , 如果加密就是 wss

二、Http、Socket、WebSocket之间联系与区别

WebSocketHTTP区别:

  • 连接方式:WebSocket提供持久的连接,通过握手过程建立连接后保持打开状态,而HTTP是无状态的,每次请求都需要重新建立连接。

  • 数据格式:WebSocket支持文本和二进制数据的传输,而HTTP主要是传输文本数据。

  • 数据传输方式:WebSocket 实现了全双工通信,客户端和服务器可以同时发送和接收数据,而 HTTP 是单向的,客户端发起请求,服务器响应数据。

  • 协议标识:WebSocket 使用 ws://wss:// 前缀标识,而 HTTP 使用 http:// 或 https://

WebSocket相对于HTTP优势:

  • 实时性:WebSocket 提供了低延迟的实时通信能力,能够在服务器端有新数据时立即推送给客户端。

  • 双向通信:WebSocket 支持客户端和服务器之间的双向通信,可以实现实时聊天、实时数据更新等场景。

  • 较低的网络开销:WebSocket 使用长连接,相对于频繁的短连接请求,减少了网络开销。

  • 更高的性能:由于减少了 HTTP 请求的开销,WebSocket 在性能上更高效。

  • 跨域支持:WebSocket 具备跨域通信的能力,可以跨域进行实时通信。

其他参考:Http、Socket、WebSocket之间联系与区别 - aspirant - 博客园

三、 vue中的websocket使用

WebSocket提供的事件:

这些事件可以通过设置对应的事件处理函数来处理不同的连接状态和数据传输。

  • open :当 WebSocket 连接成功建立时触发的事件。可以在此事件中执行初始化操作或向服务器发送初始数据。

  • message :当从服务器接收到新消息时触发的事件。可以在此事件中处理接收到的数据。

  • error :当出现连接错误时触发的事件。错误可能包括连接失败、数据传输错误等。可以在此事件中处理错误并采取适当的措施。

  • close :当 WebSocket 连接关闭时触发的事件。关闭可能是由服务器或客户端发起的,可以在此事件中执行清理操作或重新连接等操作。

参考:vue中的websocket使用