vue中使用websocket/vue-socket.io/socket.io-client

前言

因为项目需要在vue用到websocket所以找了很多帖子与资料,但是原生的需要封装逻辑比较复杂,对于仅仅是使用学习成本比较大,第三方插件的话我找的有vue-socket.io、socket.io、socket.io-client,其中vue-socket.io与socket.io我使用时都遇到个问题,就是全局组件挂载后没有找到io实例,找到了io实例与相关方法但是却无法使用,例如on方法,使用时无任何报错,但是控制台没打印后台传输的数据,而最后找到了socket.io-client直接挂载io实例使用相关方法前后台传输没问题。希望有大神看到这个帖子能出个详细的vue-socket.io正确使用教程指教下。

Socket.io

Browser和WebServer间的实时数据传输是一个很重要的需求,但最早只能通过AJAX轮询方式实现。在WebSocket标准没有推出之前,AJAX轮询是一种可行的方案。

AJAX轮询原理是设置定时器,定时通过AJAX同步服务端数据。这种方式存在延时且对服务端造成很大负载。直至2011年,IETF才标准化WebSocket - 一种基于TCP套接字进行收发数据的协议。

Socket.io将数据传输部分独立出来形成engine.io,engine.io对WebSocket和AJAX轮询进行了封装,形成了一套API,屏蔽了细节差异和兼容性问题,实现了跨浏览器/跨设备进行双向数据通信。

websocket协议

WebSocket是HTML5新增的一种通信协议,其特点是服务端可以主动向客户端推送信息,客户端也可以主动向服务端发送信息,是真正的双向平等对话,属于服务器推送技术的一种。

在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后浏览器和服务端之间就形成了一条快速通道,两者之间就直接可以数据相互传送,带来的好处是

  1. 相互沟通的Header很小,大概只有2Bytes。
  2. 服务器不再被动的接收到浏览器的请求之后才返回数据,而是在有新数据时就主动推送给浏览器。

为了建立一个WebSocket连接,浏览器首先要向服务器发起一个HTTP请求,这个请求和通常的HTTP请求不同,包含了一些附加头信息,其中附加头信息Upgrade: WebSocket表明这是一个申请协议升级的HTTP请求。服务端解析这些头信息,然后产生应答信息返回给客户端,客户端和服务端的WebSocket连接就建立起来了。双方就可以通过这个连接通道自由的传递信息,并且这个连接会持续直到客户端或者服务端的某一方主动关闭连接

为什么要用websocket

Browser已经支持HTTP协议,为什么还要开发一种新的WebSocket协议呢?

我们知道HTTP协议是一种单向的网络协议,在建立连接后,仅允许Browser/UserAgent向WebServer发出请求资源后,WebServer才能返回对应的数据,而WebServer不能主动的推送数据给Browser/UserAgent。

最初这么设计HTTP协议的原因是,假设WebServer能主动的推送数据给Browser/UserAgent,那么Browser/UserAgent就太容易受到攻击了,一些广告商也会主动把广告在不经意间强行的传输给客户端,这不能不说是一个灾难。那么单向的HTTP协议给Web应用开发带哪些问题呢?

现在假设我们要开发一个基于Web的应用去获取当前WebServer的实时数据。例如股票实时行情、火车票剩余票数等。这就需要Browser/UserAgent与WebServer之间反复进行HTTP通信,Browser/UserAgent不断的发送请求去获取当前的实时数据。

常见的方式

  • polling

Polling轮询是通过Browser/UserAgent定时向WebServer发送HTTP请求,WebServer收到请求后把最新的数据发回给Browser/UserAgent,Browser/UserAgent得到数据后将其显示,然后再定期重复此过程。

虽然这样可以满足需求,但仍存在问题,例如某段时间内WebServer没有更新的数据,但Browser/UserAgent仍然会定时发送请求过来询问,WebServer可以把以前的老数据再传送过去,Browser/UserAgent把这些没有变化的数据再显示出来。这样既浪费网络带宽,有浪费CPU利用率。

如果说把Browser/UserAgent发送请求的周期调大一些,就可以缓解这个问题,但如果WebServer的数据更新很快时,这样又不能保证Web应用获取数据的实时性。

  • LongPolling

LongPolling是对Polling的一种改进。

Browser/UserAgent发送HTTP请求到WebServer,此时WebServer可以做2件事情:

  1. 如果WebServer有新的数据需要传送,就立即把数据发回给Browser/UserAgent,Browser/UserAgent收到数据后,立即再发送HTTP请求给WebServer。
  2. 如果WebServer没有新数据需要传送,这里与Polling的方式不同的是,WebServer不是立即发送回应给Browser/UserAgent,而是将这个请求保持住,等待有新的数据来到,再去响应这个请求。当然,如果WebServer的数据长期没有更新,一段时间后,这个HTTP请求就会超时,Browser/UserAgent收到超时信息后,在立即发送一个新的HTTP请求给服务器,然后依次循环这个过程。

LongPolling的方式虽然在某种程度上减少了网络带宽和CPU利用率等问题,但仍存在缺陷

例如WebServer的数据更新速度较快,WebServer在传送一个数据包给Browser/UserAgent后必须等待Browser的下一个HTTP请求到来,才能传递第二个更新的数据包给Browser。这样的话,Browser显示实时数据最快的时间为2 xRTT(往返时间)。另外在网络拥堵的情况下,这个应该是不能让用户接受的。另外,由于HTTP数据包的头部数据量很大(通常有400多个字节),但真正被服务器需要的数据却很少(有时只有10个字节左右),这样的数据包在网络上周期性传输,难免对网络带宽是一种浪费。

综上所述,要是在Browser有一种新的网路一些,能支持客户端和服务端的双向通信,而且协议的头部又不那么庞大就very nice了。WebSocket正是肩负这样的使命登上了Web的舞台。

WebSocket 原理

WebSocket是一种双向通信协议,它建立在TCP之上,同HTTP一样通过TCP来传输数据,但与HTTP最大不同的是:

  1. WebSocket是一种双向通信协议,在建立连接后,WebSocket服务器和Browser/UserAgent都能主动的向对象发送或接收数据,就像Socket一样,不同的是WebSocket是一种建立在Web基础上的简单模拟Socket的协议。
  2. WebSocket需要通过握手连接,类似TCP也需要客户端和服务端进行握手连接,连接成功后才能相互通信。

img

简单说明下WebSocket握手的过程

当Web应用端调用new WebSocket(url)接口时,Browser就开始了与地址为URL的WebServer建立握手连接的过程。

  1. Browser与WebSocket服务器通过TCP三次握手建立连接,如果这个建立连接失败,那么后面的过程就不会执行,Web应用将收到错误消息通知。
  2. 在TCP建立连接成功后,Browser/UserAgent通过HTTP协议传送WebSocket支持的版本号、协议的字版本号、原始地址、主机地址等一系列字段给服务端。
  3. WebSocket服务器收到Browser/UserAgent发送来的握手请求后,如果数据包数据和格式正确,客户端和服务端的协议版本匹配等,就接受本次握手连接,并给出对应的数据回复,同样回复的数据包也是采用HTTP协议传输。
  4. Browser收到服务器回复的数据包后,如果数据包内容、格式都没有问题的话,就表示本次连接成功,触发onopen消息,此时Web开发者就可以在此时通过send接口向服务器发送数据。否则,握手连接失败,Web应用会收到onerror消息,并且能知道连接失败的原因。

WebSocket与TCP、HTTP的关系

WebSocket与HTTP协议一样都是基于TCP的,所以它们都是可靠的协议,Web开发者调用的WebSocketsend函数在Browser的实现中最终都是通过TCP的系统接口进行传输的。

WebSocket和HTTP协议样都属于应用层协议,那么它们之间有没有什么关系呢?

答案是肯定的,WebSocket在建立握手连接时,数据是通过HTTP协议传输的。但在建立连接之后,真正的数据传输阶段是不需要HTTP参与的。

img

WebSocket Server

如果要搭建一个WebServer,我们会有很多选择,市场上也有很多成熟的产品供我们是使用。例如开源的Apache,安装配置后即可工作。但如果想要搭建一个WebSocket服务器就没有那么轻松,因为WebSocket是一种新的通信协议,目前还是草案,没有成为标准,市场上也没有成熟的WebSocket服务器或Library实现WebSocket协议,我们必须自己手动编码去解析和组装WebSocket的数据包。要完成一个WebSocket服务器,估计所有的人都想放弃,不过市场上有几款比较好的开源Library可供使用。例如PyWebSocket、WebSocket-Node、LibWebSockets等,这些Library已经实现了WebSocket数据包的封装和解析,我们可以调用这些接口,这在很大程度上减少了我们的工作量

socket.io-client使用

官方npm文档

使用方法,通过npm包导入import socket.io-client,通过src方式导入<script src="/socket.io/socket.io.js"></script>

前端代码

// 导入依赖  
import io from 'socket.io-client';  
​  
export default {  
 data() {  
 return {  
 user: '',  
 message: '',  
 messages: \[\],  
 socket : io('localhost:3001') // 挂载依赖  
 }  
 },  
 methods: {  
 sendMessage(e) {  
 e.preventDefault();  
 },  
 created(){  
 // 发送数据给后端  
 this.socket.emit('send message',{  
 msg: 'front end send message'  
 })  
 // 监听后端传过来的数据  
 this.socket.on('message',(data)\=>{  
 console.log(data)  
 })  
 }  
 },  

Node.js服务端代码


var app \= require('express')();  
var http \= require('http').createServer(app);  
var io \= require('socket.io')(http);  
/**
1、Express初始化app为可以提供给HTTP服务器的函数处理程序(如第2行所示)。  
2、我们定义了一个路由处理程序/,当我们访问我们的网站主页时会被调用。  
3、我们使http服务器在端口3000上侦听  
*/  
app.get('/', (req, res) \=> {  
 res.sendFile(\_\_dirname + '/index.html');  
});  
​  
// on事件接收信息,这里接收连接事件  
io.on('connection', (socket) \=> {  
 console.log('a user connected');  
 // 监听前端send message事件,这个名字是自定义的,但是前后端的监听与接受要统一且唯一  
 io.on('send message',(data)\=>{  
 console.log(data)  
 // 通过message事件给前端发送数据  
 socket.emit('message', {  
 msg: \`new message\`,  
 });  
 })  
});  
​  
http.listen(3000, () \=> {  
 console.log('listening on \*:3000');  
});

我的理解是因为socket.io使用的时候挂载链接时是通过socket.io-client依赖挂载的,而使用这些方法是需要通过socket.io-client创建io实例,所以socket.io的官网可以查看到相关的方法socket.io-client可以使用

socket.io中文网

socket.io官网

如果想了解更多的方法可以到socket.io官网查看

从这两段代码可以看出,在socket.io-client中on代表监听事件, emit代表发送事件,而事件名是自定义的,前后端对此的定义应该一致且唯一。

js原生websocket封装(转载)

原生websocket封装

vue中原生websocket的使用

vue-socket.io使用问题
阮一峰websocket教程

阅读 1.4k

推荐阅读