本文最后更新于 741 天前,其中的信息可能已经有所发展或是发生改变。
很多网站为了实现推送技术,所用的技术都是轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。
在这种情况下,HTML5定义了WebSocket协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。
那么,如何用原生JavaScript实现与服务器建立WebSocket连接呢?
第一步,新建文件websocket.js
第二步,拼接出用于连接WebSocket的URL:
const wsuri = `ws://${window.location.host}/message`
第三步,定义用于存放WebSocket对象的变量:
let socket = null
第四步,编写用于初始化WebSocket的函数:
function startWebSocket() {
socket = new WebSocket(wsuri)
//监听消息接收事件
socket.addEventListener('message', onMessage)
//监听WebSocket连接事件
socket.addEventListener('open', onOpen)
//监听WebSocket异常事件
socket.addEventListener('error', onError)
//监听WebSockt关闭事件
socket.addEventListener('close', onClose)
}
第五步,编写事件对应函数:
function onOpen() {
socket.send('Hello from client')
sendHeartBeat()
}
function onError(e) {
console.error(e)
startWebSocket()
}
function onMessage(e) {
if (!e) return
console.log(e.data)
}
function onClose(e) {
console.log('WebSocket disconnected.', e)
}
关于ReadyState的解释:
Value | State | Description |
---|---|---|
0 | CONNECTING | Socket has been created. The connection is not yet open.(Socket已被创建,但还未完全连接上) |
1 | OPEN | The connection is open and ready to communicate.(Socket已经连接,可以通讯) |
2 | CLOSING | The connection is in the process of closing.(WebSocket正在关闭中) |
3 | CLOSED | The connection is closed or couldn’t be opened.(连接已经关闭,或者无法连接) |
部分内容摘自:
https://baike.baidu.com/item/WebSocket/1953845?fr=aladdin
评论