vue封装websocket_有关WebSocket必须了解的知识

一、前言

最近之前时间正好在学习java知识，所以自个想找个小项目练练手，由于之前的ssm系统已经跑了也有大半年了，虽然稀烂，但是功能还是勉强做到了，所以这次准备重构ssm系统，改名为postCode系统(至于为什么前者叫ssm，可能是因为后端java用的是ssm框架吧)，这次后端将不会开发两套，而是主要实现之前没有实现的单聊功能，由于搭建了多个服务，通信使用的是RabbitMQ，然后把着对消息通信的原理研究写下了这篇水文，后面会单独浅谈一些RabbitMQ。

二、TCP/IP模型

tcp/ip模型算是大学计算机学科中必学的一段知识，但长时间不接触，又都还给老师了。

tcp/ip模型是互联网的基础，它是一些列协议的总称，tcp/ip模型又可以划分为osi七层模型

OSI七层模型TCP/IP概率模型功能TCP/IP协议族应用层应用层文件传输、邮件传输ftp、smtp表示层数据格式化，代码转换，数据加密没有协议会话层接触或者建立于别的接口联系没有协议传输层传输层提供端对端的接口TCP、UDP网络层网络层为数据包选择路由IP、ICMP、RIP、OSPF数据链路层链路层传输有地址的帧以及错误检查功能SLIP、CSLIP、PPP、ARP物理层以二进制数据形式在物理媒介上传输数据IS02110

2.1、UDP的特点

无连接

UDP无需建立三次握手，而是想要发送数据的时候就可以直接送发送端：将收到应用层的数据增加一个UDP的标识就发送出去了接受端：将UDP协议的标识去掉就传输给应用层了

可以单播，多播，广播

UDP支持一对一、一对多、多对多、多对一的传输方式。

不可靠性

通信不需要建立连接，也不需要管对方有没有收到，而是想发就发，这样的连接是不安全的

2.2、TCP的特点

面向连接仅支持单播传输可靠性

TCP提供全双工通信(重点重点)

TCP允许通信双方的应用程序在任何时候都能发送数据，因为TCP连接的两端都设有缓存，用来临时存放双向通信的数据。当然，TCP可以立即发送一个数据段，也可以缓存一段时间以便一次发送更多的数据段(最大的数据段大小取决于MSS)

三、Socket编程

在了解WebSocket编程之前要先了解了解Socket

什么是Socket

超详细文档

起初应用层的数据到达传输层后需要依赖tcp/ip协议族建立tcp连接，然后tcp又需要依赖网络层的ip协议等，从而产生了不同数据格式依赖不同协议模型的尴尬局面，导致一些列安全和网络阻塞问题，从而诞生了socket的接口。

socket的诞生是为了应用程序能够更方便的将数据经由传输层来传输socket本质上就是对TCP/IP 的运用进行了一层封装socket并不是协议，而是介于应用层和传输层之间抽象出来的一层，是一组接口socket建立连接和断开连接和普通的tcp连接一样需要进行三次握手和四次挥手socket可以建立长连接和短连接socket主要是应用在C/S(Client/Server)模式里所有的连接都需要经过socket接口

最后可以简单的理解为socket对tcp/ip封装后向应用层提供一些更加方便传输数据的接口。

四、WebSocket

因为socket只能是在C/S架构出现，浏览器端操作都处于应用层，所以Html5中提出了WebSocket通信协议，为了解决真正意义上的全双工通信的难题。

建立WebSocket连接前会先发送一个Header里面有Upgrade:Websocket的http请求ws和wss都属于WebSocket的通信协议，wss和https一样都只是多了TLS协议

不同网络通信协议的对应关系

类WebSocketXMLHttpRequest通信协议wshttp通信协议+TLS协议wsshttps

4.1、ScokJS/Socket.IO

ScokJS

ScokJS是一套基于WebSocket Api封装的js库，它在浏览器和web服务器之间创建了一个低延迟、全双工、跨域通信通道。Spring框架提供了基于SockJS协议的透明的回退选项；Spring Framework也是SockJS推荐Java Server的实现，同时也提供了Java 的client实现SockJS的一大好处在于提供了浏览器兼容性。优先使用原生WebSocket，如果在不支持websocket的浏览器中，会自动降为轮询的方式。因此服务器如果是spring环境，应该优先使用ScokJS

Socket.IO

使用文档
原理文档

Socket.io和ScokJS一样都是基于WebSocket Api封装的js库，同样也是为了解决部分浏览器不支持WebSocket而诞生的js库。Socket.io本身设计就是提供了一套node环境的全双工连接，所有在node环境作为服务器使用Socket.io的时候还需要绑定http.Server服务，因为WebSocket协议是构建在HTTP协议之上的因此服务器如果是node环境，应该优先使用Socket.io

4.2、STOMP/vue-socket

虽然ScokJS和Socket.IO都解决了浏览器兼容性问题，但是在进行双向通信的过程中是不遵循任何消息协议的，也就是当消息到达应用层后就只剩消息文本本身了，所以不利于跨平台和多端通信，于是对应约束消息格式的消息协议的就诞生了。

STOMP

使用文档

STOMP是一种基于帧的协议，帧的结构是效仿HTTP报文格式STOMP可以直接使用WebSocket进行连接，也可以使用SockJS进行连接Stomp.client(url) 通过WebSocket直接连接Stomp.over(ws) 通过sockJS进行连接STOMP更加适合于做于消息组件，其中的方法设计都是可以配合rabbitMQ使用的，只需要在rabbitMQ中安装rabbitmq_web_stomp和 rabbitmq_web_stomp_examples就可以了

vue-socket