Vue.js 如何使用 Socket.IO？

JavaScript017

Vue.js 如何使用 Socket.IO？,第1张

在很多需求业务中，都需要浏览器和服务器实时通信来实现功能，比如：扫码登录(扫码后，手机确认登录，PC网页完成登录并跳转)、订单语言提醒等，这些都是建立在两端实时通信的基础上的。对前端而言，来实现浏览器和服务器实时通信，最好的选择就是Socket.IO库，能够快速的实现两端实时通信功能。

Socket.IO是一个WebSocket库，可以在浏览器和服务器之间实现实时，双向和基于事件的通信。它包括：Node.js服务器库、浏览器的Javascript客户端库。它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用，非常方便和人性化，而且支持的浏览器最低达IE5.5

(1)、支持浏览器/Nodejs环境

(2)、支持双向通信

(3)、API简单易用

(4)、支持二进制传输

(5)、减少传输数据量

（1）客户端

main.js添加下列代码

发送消息和监听消息

（2）服务端

服务端，我们基于express搭建node服务器。

index.js文件

然后启动服务端服务

客户端即可查看效果。

websocket 是一种网络通信协议，一般用来进行实时通信会使用到

websocket 协议和 http 协议类似，http 协议有一个缺陷，只能由客户方端发起请求，服务端根据请求 url 和传过去的参数返回对应结果

websocket 是双向通信的，只要 websocket 连接建立起来，可以由客户端给服务端发送数据，也可以由服务端主动给客户端发送数据

websocket 适用场景：聊天室

websocket 相关简介，可以看 阮老师的文章

nodejs 可以通过 nodejs-websocket 来实现创建一个 websocket 的服务

nodejs-websocket 用法

文档地址： https://www.npmjs.com/package/nodejs-websocket

node 创建的 websocket 服务，主要包含三个概念

可以通过 server.on('event', (res) =>{console.log(res)}) 调用

这次使用 websocket 实现一个基本的聊天室功能，个人感觉还比较简单，只是中间会出现一些由于链接异常断开，导致后端服务抛出异常挂掉的情况

记住前端关闭页面或者刷新页面时，先把连接关掉，每次进入页面时创建连接，然后后端将由于异常关闭导致的出错 try/catch 一下，避免抛出异常，阻塞进程

websocket 对于实现聊天室这样的功能，真的很方便，其实还能扩展到多人合作或者网络游戏等功能

什么是WebSocket?

1、在HTML5出现

2、独立于http的实时通信协议，全双工

浏览器和服务器之间提供了一个基于TCP连接的双向通道。

在WebSocket出现之前，服务端想要向客户端推送数据只能通过客户端向服务端主动发送请求才能获得。

构建实时的web应用时，主要采用轮询和Comet技术。其中Comet技术又分成两种，长轮询机制和流技术。

轮询：一定的时间间隔向服务端发请求，以频繁的请求方式来保持客户端和服务端的同步。

长轮询：如果当前请求没有数据返回，则继续保持当前请求的网络连接状态，直到服务端有数据返回或连接超时。

        减少了客户端和服务端交互的次数。

流：客户端的页面向服务端发出一个长连接的请求。服务器接收这个请求后作出回应并不断更新连接状态从而保证

    客户端和服务器的连接不过期。这种就可以保持将服务端的信息持续不断地发向客户端。

这些实质上都是用ajax的方法模拟实时效果的，没有实现真正的实时技术。

WebSocket是独立的基于TCP的协议，和http的关系只停留在WebSocket的握手被http服务器当作

Upgrade request http包处理。

协议关键：

Response Headers

Upgrade: websocket

Request Headers

Upgrade: websocket

一旦建立了连接，服务端与客户端之间就可以以全双工方式进行通信。

什么是Scoket.io?

它是由js实现,基于node.js,支持WebSocket协议用于实时通信，跨平台的开源框架

Socket.io将Websocket和轮询机制以及其它的实时通信方式封装成了通用的接口，并且在服务端实现了这些实时通信机制。

Socket.io中主要使用了websocket，将轮询作为其辅助选项，提供的是相同的接口。和node.js一样，也是事件驱动的。

不是所有的浏览器都支持websocket,通过socket.io的封装，你不用关心里面用了什么连接方式。在任何浏览器里都可以使用socket.io来建立异步的连接。

socket.io包含了服务端和客户端的库，如果在浏览器中使用了socket.io的js,服务端也必须同样适用。

参考链接：

https://www.cnblogs.com/mazg/p/5467960.html