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

时间 2020-05-11

标签 vue 使用 websocket socket.io socket 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正确使用教程指教下。javascript

Socket.io

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

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

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

websocket协议

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

在WebSocket API中，浏览器和服务器只须要作一个握手的动做，而后浏览器和服务端之间就造成了一条快速通道，二者之间就直接能够数据相互传送，带来的好处是git

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

为了创建一个WebSocket链接，浏览器首先要向服务器发起一个HTTP请求，这个请求和一般的HTTP请求不一样，包含了一些附加头信息，其中附加头信息Upgrade: WebSocket代表这是一个申请协议升级的HTTP请求。服务端解析这些头信息，而后产生应答信息返回给客户端，客户端和服务端的WebSocket链接就创建起来了。双方就能够经过这个链接通道自由的传递信息，而且这个链接会持续直到客户端或者服务端的某一方主动关闭链接web

为何要用websocket

Browser已经支持HTTP协议，为何还要开发一种新的WebSocket协议呢？express

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

最初这么设计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件事情：

若是WebServer有新的数据须要传送，就当即把数据发回给Browser/UserAgent，Browser/UserAgent收到数据后，当即再发送HTTP请求给WebServer。
若是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最大不一样的是：

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

简单说明下WebSocket握手的过程

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

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

WebSocket与TCP、HTTP的关系

WebSocket与HTTP协议同样都是基于TCP的，因此它们都是可靠的协议，Web开发者调用的WebSocket的send函数在Browser的实现中最终都是经过TCP的系统接口进行传输的。

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

答案是确定的，WebSocket在创建握手链接时，数据是经过HTTP协议传输的。但在创建链接以后，真正的数据传输阶段是不须要HTTP参与的。

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)
})
}
},

vue-socket.io使用问题

vue中原生websocket的使用

原生websocket封装

js原生websocket封装(转载)

个人理解是由于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表明发送事件，而事件名是自定义的，先后端对此的定义应该一致且惟一。

Node.js服务端代码

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);
/**
一、Express初始化app为能够提供给HTTP服务器的函数处理程序（如第2行所示）。
二、咱们定义了一个路由处理程序/，当咱们访问咱们的网站主页时会被调用。
三、咱们使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-client中on表明监听事件， emit表明发送事件，而事件名是自定义的，先后端对此的定义应该一致且惟一。

js原生websocket封装(转载)

原生websocket封装

vue中原生websocket的使用

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