文档章节

Web API 接口之WebSocket

w-rain
 w-rain
发布于 2017/04/25 15:37
字数 853
阅读 1669
收藏 65

1. 概述

    我们在网络中大部分应用都是围绕着 HTTP协议 的请求/响应模式而构建的,所有的HTTP请求都是由客户端控制的,这就需要用户互动和定期轮询,以便服务器加载新数据。HTTP协议是一种无状态的协议,服务端本身不具备识别客户端的能力,必须借助外部条件,比如session和cookie,才能和特定的客户端保持通信。当然也有比如长轮询等技术,可以让服务端有新数据可用时,立即将数据发送到客户端。但是这类技术带有HTTP的开销,不适合低延迟应用,比如网页版在线多人游戏、网页版在线多人聊天等。

    WebSocket 提供了一组创建和管理WebSocket的连接,以及可以通过连接发送和接受数据的API。简单地说就是提供服务端和客户端进行全双工通信,客户端和服务端之间存在持久的连接,而且双方都可以随时发送数据。

    WebSocket不使用HTTP协议,有自己的协议,WebSocket协议用来向服务器发送文本和二进制数据,可以跨域通信。

    浏览器发出的请求如下:    

GET / HTTP/1.1
Connection: Upgrade
Upgrade: websocket
Host: example.com
Origin: null
Sec-WebSocket-Key: 
Sec-WebSocket-Version: 13

    Connection: 表示浏览器通知服务器,如果可以就升级到WebSocket协议。

    Upgrade: HTTP协议1.1规定,Upgrade头信息将通信协议从HTTP 1.1 转向该项所指定的协议。

    Origin: 用于验证浏览器域名是否在服务器允许的范围之内。

    Sec-WebSocket-Key: 用于握手协议的密钥,是base64编码的16字节随机字符串。

    服务器返回的响应如下:

HTTP/1.1 101 Switching Protocols
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Accept: 
Sec-WebSocket-Origin: null
Sec-WebSocket-Location: ws://example.com

   Sec-WebSocket-Accept: 服务器在浏览器提供的Sec-WebSocket-Key字符串后面,添加“258EAFA5-E914-47DA-95CA-C5AB0DC85B11” 字符串,然后再取sha-1的hash值。

    Sec-WebSocket-Location: 表示通信的WebSocket网址。            

    注意:WebSocket协议用ws表示。此外,还有wss协议,表示加密的WebSocket协议,对应HTTPs协议。

 

2. 常量 

    以下常量是Ready state 属性的取值,可以用来描述WebSocket的取值。

常量 描述
CONNECTING 0 连接还没开启
OPEN 1 连接已开启并准备好通信
CLOSING 2 连接正在关闭
CLOSED 3 连接已经关闭,或者连接无法建立

       

 

 

 

 

3. 方法

    3.1 close()    

        关闭WebSocket连接或停止正在进行的连接请求。

 

 

    3.2 send()        

        通过WebSocket连接向服务器发送数据。

 

      

 

 

4. 示例

    4.1 发送字符串数据以及使用Blob或ArrayBuffer对象发送二进制数据

// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');

// Connection opened
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

// Listen for messages
socket.addEventListener('message', function (event) {
    console.log('Message from server', event.data);
});


//使用 Blob 或 ArrayBuffer 对象发送二进制数据


// 使用ArrayBuffer发送canvas图像数据
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);
for (var i = 0; i < img.data.length; i++) {
	binary[i] = img.data[i];
}
connection.send(binary.buffer);

// 使用Blob发送文件
var file = document.querySelector('input[type="file"]').files[0];
connection.send(file);

 4.2 接收二进制数据   

connection.binaryType = 'arraybuffer';

connection.onmessage = function(e) {
  console.log(e.data.byteLength); // ArrayBuffer对象有byteLength属性
};

 

参考资料:

javascript标准参考教程之websocket

WebSocket MDN

WebSocket API

版权申明: 本文为原创文章, 转载时请注明:来自w-rain的个人博客

© 著作权归作者所有

共有 人打赏支持
w-rain
粉丝 27
博文 53
码字总数 46145
作品 0
成都
程序员
私信 提问
加载中

评论(4)

w-rain
w-rain

引用来自“酷哒哒”的评论

Good Good Good
谢谢,我会继续努力的!😃
w-rain
w-rain

引用来自“kubei”的评论

伍成才 想问博主 js用在服务器端开发的实用部署 怎么弄
这块儿我最近也是才开始涉及,不太擅长,建议你看看《NODE.JS项目实战》这本书。
酷哒哒
酷哒哒
Good Good Good
kubei
kubei
伍成才 想问博主 js用在服务器端开发的实用部署 怎么弄
Spring消息之WebSocket

一、WebSocket简介 WebSocket 的定义?WebSocket是HTML5下一种全双工通信协议。在建立连接后,WebSocket服务器端和客户端都能主动的向对方发送和接收数据,就像Socket一样。 WebSocket 的由来...

jmcui
05/06
0
0
websocket与node.js的完美结合

本文为原创文章,出自http://cnodejs.org,转载请注明出处和作者 作者:kongwu 原文:http://cnodejs.org/blog/?p=273 之所以写下此文,是我觉得越是简单的技术往往能发挥越重要的作用,随着...

红薯
2011/03/20
9.6K
2
应用 HTML5 的 WebSocket 实现 BiDirection 数据交换

HTML5 是新一代的 Web 标准。虽然 HTML5 标准还没有最终确定但是它已然成为主流,各大厂商都开始提前实现其草案中的功能。HTML5 提供了很多新特征,比如 Canvas、离线存储、多线程、视频标签...

IBMdW
2012/01/04
2.6K
6
【转载】使用 HTML5 WebSocket 构建实时 Web 应用

作为下一代的 Web 标准,HTML5 拥有许多引人注目的新特性,如 Canvas、本地存储、多媒体编程接口、WebSocket 等等。这其中有“Web 的 TCP ”之称的 WebSocket 格外吸引开发人员的注意。WebSo...

长平狐
2012/09/06
280
0
使用 HTML5 WebSocket 构建实时 Web 应用

作为下一代的 Web 标准,HTML5 拥有许多引人注目的新特性,如 Canvas、本地存储、多媒体编程接口、WebSocket 等等。这其中有“Web 的 TCP ”之称的 WebSocket 格外吸引开发人员的注意。WebSo...

lyg945
2014/08/27
1K
3

没有更多内容

加载失败,请刷新页面

加载更多

Impala和Hive集成Sentry、Kerberos认证

关于 Kerberos 的安装和 HDFS 配置 kerberos 认证,请参考 HDFS配置kerberos认证。 关于 Kerberos 的安装和 YARN 配置 kerberos 认证,请参考 YARN配置kerberos认证。 关于 Kerberos 的安装和...

hblt-j
9分钟前
0
0
Ubuntu 18.04 PostgreSQL 11 apt 默认安装某些问题解析

首先默认安装软件(本文以PostgreSQL 11.1为例,其他版本类似)。 sudo apt install postgresql-11 等待软件自动安装并完成配置,启动服务。 服务状态如下: vmware@vmware-virtual-machine:...

白豆腐徐长卿
22分钟前
1
0
一步步动手实现高并发的Reactor模型 —— Kafka底层如何充分利用多线程优势去处理网络I/O与业务分发

一、从《Apeche Kafka源码剖析》上搬来的概念和图 Kafka网络采用的是Reactor模式,是一种基于事件驱动的模式。熟悉Java编程的读者应该了解Java NIO提供了Reactor模式的API。常见的单线程Jav...

Anur
25分钟前
1
0
数字信号处理各种处理及图象

https://wenku.baidu.com/view/b1bb67f1f90f76c661371a75.html?sxts=1544696459935

whoisliang
29分钟前
1
0
rabbitmq学习

使用docker安装rabbit docker run -d --hostname my-rabbit --name rabbit -p 8080:15672 rabbitmq:management--hostname:指定容器主机名称--name:指定容器名称-p:将mq端口号映射到本地...

元谷
44分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部