概念: WebSocket 是 html5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
特点: WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket api 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
流程: 在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
目前: 现在,很多网站为了实现推送技术,所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。
优势: HTML5 定义的 WebSocket 协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。
WebSocket 对象
let ws = new WebSocket('ws://localhost:3000') // 创建 WebSocket 对象
WebSocket 对象属性:
属性 | 描述 |
---|---|
ws.readyState | 只读属性 readyState 表示连接状态,可以是以下值: 0 - 表示连接尚未建立。 1 - 表示连接已建立,可以进行通信。 2 - 表示连接正在进行关闭。 3 - 表示连接已经关闭或者连接不能打开。 |
WebSocket 对象事件:
事件 | 事件处理程序 | 描述 |
---|---|---|
open | ws.onopen | 连接建立时触发 |
message | ws.onmessage | 客户端接收服务端数据时触发 |
error | ws.onerror | 通信发生错误时触发 |
close | ws.onclose | 连接关闭时触发 |
WebSocket 对象方法:
方法 | 描述 |
---|---|
ws.send() | 使用连接发送数据 |
ws.close() | 关闭连接 |
// 创建 WebSocket 对象
let ws = new WebSocket('ws://localhost:3000')
// 定时器
let timer;
// 监听打开
ws.onopen = webSocketOpen;
// 监听异常
ws.onerror = webSocketError;
// 监听消息
ws.onmessage = webSocketMessage;
// 监听关闭
ws.onclose = webSocketClose;
function webSocketOpen() {
console.log(`连接成功`)
start()
},
function webSocketError() {
console.log(`连接异常,请刷新页面重试`)
},
function webSocketMessage(e) {
console.log(`接收到消息:${e.data}`)
},
function webSocketClose() {
console.log(`连接关闭`)
clearInterval(timer)
},
// 发送心跳, 因为长时间不发送消息,就会断
function start() {
clearInterval(timer)
timer = setInterval(() => {
let date = new Date()
ws.send(`发送心跳给后端${date}`)
}, 2 * 60 * 1000)
}
双向通信,如聊天室。
微信小程序对 WebSocket 进行了封装,wx.connectSocket() 可以理解为创建了一个 WebSocket 实例 SocketTask。
socket.io 支持 WebSocket、轮询、HTTP 流等方式。
本文作者: 卡布奇诺o
本文链接:https://www.cnblogs.com/Faith-Yin/archive/2020/10/19/13840196.html
websocket是实现浏览器和web服务器沟通的一个好方法。一个比较好的使用方法就是在web网页上使用websocket,然后再起一个webdocketd服务器。
HTML5定义了WebSocket协议,能更好的节省服务器资源和带宽并达到实时通讯。在 WebSocket API,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
WebSocket是基于TCP的一种新的网络协议,并在2011年被IETF定为标准的全双工通信协议,它实现了客户端与服务器全双工通信。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。
Web Sockets定义了一种在通过一个单一的 socket 在网络上进行全双工通讯的通道。它不仅仅是传统的 HTTP 通讯的一个增量的提高,尤其对于实时、事件驱动的应用来说是一个飞跃。
WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连接,循环连接的不算)
在使用websocket的过程中,有时候会遇到网络断开的情况,但是在网络断开的时候服务器端并没有触发onclose的事件。这样会有:服务器会继续向客户端发送多余的链接,并且这些数据还会丢失
在建立web socket通信后,发送数据时,出现下图所示现象:要明白这个问题产生的原因,就需要了解websocket的几个状态。通常在实例化一个websocket对象之后,客户端就会与服务器进行连接
在 websocket 出现之前,为了实现 web 端的实时通信,通常采用的是 Ajax 轮询技术,(轮询是在特定的时间间隔内,由浏览器向服务器发送 HTTP 请求,再由服务器返回最新的数据)
websocket服务端往往需要和服务层打交道,因此需要将服务层的一些bean注入到websocket实现类中使用,但是呢,websocket实现类虽然顶部加上了@Component注解,依然无法通过@Resource和@Autowire注入spring容器管理下的bean
以下 API 用于创建 WebSocket 对象。以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的,指定了可接受的子协议。以下是 WebSocket 对象的属性。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!