前言
WebSocket
很多人听说过,没见过,没用过,以为是个很高大上的技术,实际上这个技术并不神秘,可以说是个很容易就能掌握的技术,希望在看完本文之后,马上把文中的栗子拿出来自己试一试,实践出真知。
WebSocket的由来🤞
我们平时在开发过程中,接触最多的就是HTTP协议了,正常情况下,我们通过客户端向服务端发送HTTP请求,服务器响应请求资源,这个过程我们熟悉的不能再熟悉了。
但是HTTP协议有一个问题就是通信只能由客户端发起,也就是说HTTP协议属于单向通信。
举个栗子,我们在股票中自选某个股票,我们很关心它的价格高于多少时准备卖掉,我们不可能时时刻刻盯着股价来看,这个时候就在想,如果交易所可以自动推送股票的价格该多好,如果采用我们平时HTTP协议做不到服务器主动向客户端推送消息。
当然上述栗子也有办法解决,我们可以使用轮询,即每隔一段时间,客户端就像服务端发起一个询问,但是轮询最大的问题就是效率非常低下,而且很浪费资源,打比方成千上万的韭菜都在关注股票,都在发起请求,那这个请求量就很大了,因此,在很多大佬的努力下,WebSocket就横空出世了!
WebSocket的优点😊
从上述举得股票栗子中就可以很好的看出WebSocket的优点:
- 支持双向通信,实时性更好
- 更好,更轻量与服务端进行通信,因为WebSocket提供了简单的消息规范,可以更快的适应长连接的环境
- 支持扩展。ws协议定义了扩展,用户可以扩展协议,或者实现自定义的子协议,同时可以加密
- 可以发送文本,也可以发送二进制数据
- 没有同源策略的限制,客户端可以任意服务器连接(没有同源策略,那我们也可以用来进行解决跨域问题啦🤣)
WebSocket的应用🙈
现在WebSocket用处很多,最典型的有以下几个
- 聊天室
- 网站视频弹幕
- 股票价格实时显示
- 物联网数据推送
还有其他的应用场景,大家可以好好想一想
举个栗子🌰
说了这么多,我们可以自己来实现一个WebSocket的栗子啦,例子包括了WebSocket服务端、WebSocket客户端(网页端)。完整代码可以在 这里 找到,有帮助的可以帮忙点个⭐️。
上面我们提到WebSocket技术可以应用于股票价格实时显示,那我们就撸一个这样的例子。
先上效果
从效果上来看我们可以发现当我们点击开始的时候,客户端就可以请求服务端,服务端去推送实时股价。
好,看完效果我们来撸具体代码
1. 客户端
客户端先简单说明一下,这里为了方便,采用了Vue和ElementUi,具体代码可以看这里 。
//连接webscoekt
vm.ws = new WebSocket('ws://localhost:8082')
//打开websocket
vm.ws.onopen = function (e) {
console.log('Connection to server opened')
//发送消息
const stockName = vm.ws.send(
JSON.stringify(
vm.stockData.map((i) => {
return i.name
})
)
)
console.log('sened a mesg')
}
//收到服务器返回消息
vm.ws.onmessage = function (e) {
//解析data
vm.stockData = JSON.parse(e.data)
}
复制代码
2. 服务端
服务端用了ws
这个库。当然大家也可以采用 socket.io
首先先安装一下这个库
//安装 ws 库
npm i ws
复制代码
下面开始写server.js
const WebSocket = require('ws')
//生成WebSocket服务端
const wss = new WebSocket.Server({ port: 8082 })
function randomInterval(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min) / 100
}
//websocket连接
wss.on('connection', function (ws) {
//接收信息
ws.on('message', function (message) {
stockRequest = JSON.parse(message)
console.log('收到消息', stockRequest)
})
//模拟股票价格
const clientStockUpdater = setInterval(function () {
for (let i in stockRequest) {
stockRequest[i].price += randomInterval(-100, 100)
//推送消息
ws.send(JSON.stringify(stockRequest))
}
}, 1000)
//关闭websocket
ws.on('close', function () {
clearInterval(clientStockUpdater)
})
})
复制代码
结语✍️
看完以上是不是发现WebSocket很简单,其实本文只是一个WebSocket入门教程,大家不妨自己动手写一下,在我这个例子上在加深一下,探究一下WebSocket的加密以及心跳机制等。