websocket 协议解析

本文作者:IMWeb went 原文出处:IMWeb社区 未经同意,禁止转载

1.使用websocket 场景

websocket作为用于双向通信的实用协议,在笔者最近做的全平台私信系统进行了应用。本次开发的私信系统与普遍理解的“发送-接受-发送”三个流程分开不一样,实现的是类似于QQ与微信的实时通信系统,需要做到收发消息实时化。

进行通信协议选定的时候,不能由服务器主动联系客户端,又因为每次通信都需要经过握手请求、响应步骤进行连接重建的http协议只能通过轮询进行伪双向通信,所以http协议首先被我们排除了,在HTML5下的协议websocket映入了我们的眼帘。

2.websocket 机制

首先要明确的一点是,支持websocket协议的客户端和服务器能够使用websocket协议进行双向通信,也就是客户端可以随时向服务器发送请求,服务器也能够随时向客户端发送请求。

跟http使用轮询实现不一样的是websocket一次连接成功后则可以重复进行请求和响应,更好地节省了服务器的资源与带宽。

websocket与http协议类似的是同样建立于tcp传输协议之上,通过tcp传输层进行数据传输。而客户端与服务器端一般使用的通信协议仍是http,我们要使用websocket协议进行通信则首先要建立起websocket连接,这个连接的建立依赖于http。

一个websocket连接首先发送http请求到服务器,注意比起平常的http请求多了4个字段,sec-WebSocket-* 为建立websocket协议的参数,upgrade字段才是重点,告诉服务器我这次的请求不是单纯的http请求,而是要求服务器升级连接并建立起websocket长连接。

服务器响应也根据特殊的请求头进行了特殊响应,首先101返回码表明本次连接的通信协议经过了转换并成功握手成功建立起了通信。connection字段和upgrade字段则表明本次通信协议进行了升级转换,转换的是websocket协议。

websocket的协议标识符为ws,从下图Request URL看到本次websocket连接的协议标识符为wws,这表示websocket连接是经过加密处理的。

建立了websocket连接后,只要客户端和服务器端任意一端不主动断开连接前,通信行为都是在一个持久连接上发起,后续数据与请求都通过帧序列的形式进行传输。

从chrome控制台的Websocket调试面板中可以看到,在一个websocket连接中多次请求都可以由服务器进行实时响应,实行实时上下行通信的能力得以见证。

3.websocket API

通过WebSocket构造函数可以创建websocket连接并返回提供管理该连接API的实例对象。

const ws = new WebSocket('wws://url');
websocket 属性与事件

事件&属性

定义

onopen

服务器端响应连接请求后,readyState状态置为OPEN时触发。标志着握手阶段已结束,可以进行收发消息。

onmessage

服务器端有消息到达时触发,可以接受文本和二进制数据。

onclose

连接关闭时,readyState状态置为CLOSED时触发。标志着服务器端与客户端不能再通信。

onerror

错误发生时触发,会导致连接关闭。

readyState

websocket连接状态。CONNECTING(连接中) OPEN(连接成功) CLOSING(关闭中) CLOSED(已关闭)

protocol

websocket连接协议。ws & wws

bufferedAmount

调用send方法后在发送队列缓存中的数据量,所有消息已发出则清零。

binaryType

当收到二进制数据时,用于表示该二进制数据的类型(blob & arraybuffer)

// 监听到open事件后,向服务器发送success文本。
ws.addEventListener('open', (e) => {
    ws.send('success!');
})
websocket 方法

(1) send 方法

// 文本数据
const text = 'i am text';

// 二进制数据
const blob = new Blob('i am blob');

ws.send(text);
ws.send(blob);

(2) close 方法

close方法可以传入两个参数 code 和 reason ,用于向服务器端说明关闭连接原因。

ws.close(1000, 'mission finished');

// 不传任何参数,默认code是1000,表示正常关闭
ws.close();

4. 小结

在需要实现双向实时通信的场景下,不妨直接使用websocket协议吧。但是目前IE8和IE9是不支持websocket的,要实现该功能还是只能通过http 的long polling 方式去实现。

以上是websocket的基础理论,希望了解后有助于大家的实践!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏增长技术

Android Debug Bridge

Android Debug Bridge,Android调试桥接器,简称adb,是用于管理模拟器或真机状态的万能工具, 采用了客户端-服务器模型,包括三个部分:

3122
来自专栏蓝天

HBase & thrift & C++编程

本文目的是介绍使用C++如何操作HBase。从HBase 0.94开始,HBase新增thrift2,本文只介绍和讨论thrift2相关的。hbase-1....

1751
来自专栏闵开慧

tomcat里面的文件详细说明

如何安装tomcat服务器   安装Tomcat之前要先安装JDK,可从http://java.sun.com上下载最新版本的JDK。 Tomcat可从Apac...

41010
来自专栏云计算教程系列

如何在CentOS 7上使用Postgres,Nginx和Gunicorn设置Django

Django是一个功能强大的Web框架,可以帮助您启动Python应用程序或网站。Django包含一个简化的开发服务器,用于在本地测试您的代码,但是对于任何与生...

1543
来自专栏林欣哲

Spring的事务管理

1173
来自专栏CaiRui

memcached服务

介绍 它是一套数据缓存系统或软件 用于动态应用系统中缓存数据库的数据,减少数据库的访问压力,达到提升性能的效果,实际应用环境中多用于数据库的cache的应用。它...

3768
来自专栏Janti

Mysql双机热备配置(超详细多图版)

一、双击热备介绍 1.基本概念 双机热备特指基于高可用系统中的两台服务器的热备(或高可用),双机高可用按工作中的切换方式分为:主-备方式(Active-Sta...

1K6
来自专栏云计算教程系列

如何使用Apache驱动Django

Django是一个功能强大的Web框架,可以帮助您快速启动Python应用程序或网站。Django包含一个简化的开发服务器,用于在本地测试您的代码。但是其也需要...

3005
来自专栏黑泽君的专栏

day47_Maven学习笔记

Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具。 Maven是一个跨平台的项目管理工具,它是使用j...

1301
来自专栏小樱的经验随笔

kali 2018.1安装教程

00x01 摘要 Kali-linux系统,渗透测试人员的利器,其官网自称 OurMost Advanced Penetration Testing Distr...

4036

扫码关注云+社区

领取腾讯云代金券