文档章节

Web API 接口之WebSocket

w-rain
 w-rain
发布于 2017/04/25 15:37
字数 853
阅读 1336
收藏 65
点赞 0
评论 4

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
博文 43
码字总数 43952
作品 0
成都
程序员
加载中

评论(4)

w-rain
w-rain

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

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

引用来自“kubei”的评论

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

HTML5 WebSocket 作为新一代的web标准,HTML5为我们提供了很多有用的东西,比如canvas,本地存储(已经分离出去了),多媒体编程接口,当然还有我们的WebSocket。WebSocket是HTML5开始提供的...

Srtian ⋅ 05/11 ⋅ 0

websocket基础---stomp英文文档STOMP Over WebSocket

STOMP Over WebSocket What is STOMP? STOMP is a simple text-orientated messaging protocol. It defines an interoperable wire format so that any of the available STOMP clients can ......

spinachgit ⋅ 05/02 ⋅ 0

Dva 中使用 WebSocket

一、概述 Websocket 是 H5 自带的一个 API,随着越来越多的浏览器都自适应了 H5 的特性,许多浏览器也内置了 WebSocket API。也就是说 WebSocket 和 window、document 一样作为全局变量可以直...

dkvirus ⋅ 05/28 ⋅ 0

websocket实现用户双方通信

本文介绍一下websocket的用法,可能介绍的不够专业,所有请见谅了。websocket可以是纯Java实现,也可以整合Maven工程SSM框架实现,前端都是html或jsp的网页进行websocket使用与实现。 我把两...

qq_38047600 ⋅ 04/20 ⋅ 0

微信小程序WebSocket开发

微信小程序WebSocket开发 让我们来实现一个简单的微信小程序WebSocket。WebSocket是一种没有被规范化的网络协议,不过网络上又有文章说是2011年被国际化。不过不管怎么样它摆脱了Http的无状态...

王And木 ⋅ 05/31 ⋅ 0

JVM 上各种 Web 框架的抽象层 - Asity

Asity Asity 是 Java 虚拟机上各种 Web 框架的抽象层,可以在 JVM 上构建 Web 框架不可知的应用程序。 Asity 是 Web 框架的一个轻量级抽象层,它被设计用来构建应用程序和框架,这些应用程序...

匿名 ⋅ 05/28 ⋅ 0

全双工通信的 WebSocket

一. WebSocket 是什么? WebSocket 是一种网络通信协议。在 2009 年诞生,于 2011 年被 IETF 定为标准 RFC 6455 通信标准。并由 RFC7936 补充规范。WebSocket API 也被 W3C 定为标准。 WebS...

一缕殇流化隐半边冰霜 ⋅ 05/22 ⋅ 0

talent-tan/tio-websocket-showcase

tio-websocket-showcase 项目介绍 展示tio-websocket的用法,官方提供的唯一tio-websocket示范教程 包括wss和流量监控及处理等高级特性 还包括t-io作者写的一个用于连接websocket服务器的js小...

talent-tan ⋅ 05/06 ⋅ 0

从Chrome源码看WebSocket

WebSocket是为了解决双向通信的问题,因为一方面HTTP的设计是单向的,只能是一边发另一边收。而另一方面,HTTP等都是建立在TCP连接之上的,HTTP请求完就会把TCP给关了,而TCP连接本身就是一个...

人人网FED ⋅ 05/27 ⋅ 0

JavaScript 工作原理之五-深入理解 WebSockets 和带有 SSE 机制的HTTP/2 以及正确的使用姿势(译)

原文请查阅这里,略有改动,本文采用知识共享署名 3.0 中国大陆许可协议共享,BY Troland。 本系列持续更新中,Github 地址请查阅这里。 这是 JavaScript 工作原理的第五章。 现在,我们将会...

tristan ⋅ 05/11 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

笔试题之Java基础部分【简】【一】

基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语法,集合的语法,io 的语法,虚拟机方面的语法,其他 1.length、length()和size() length针对...

anlve ⋅ 18分钟前 ⋅ 1

table eg

user_id user_name full_name 1 zhangsan 张三 2 lisi 李四 `` ™ [========] 2018-06-18 09:42:06 星期一½ gdsgagagagdsgasgagadsgdasgagsa...

qwfys ⋅ 42分钟前 ⋅ 0

一个有趣的Java问题

先来看看源码: public class TestDemo { public static void main(String[] args) { Integer a = 10; Integer b = 20; swap(a, b); System.out......

linxyz ⋅ 47分钟前 ⋅ 0

十五周二次课

十五周二次课 17.1mysql主从介绍 17.2准备工作 17.3配置主 17.4配置从 17.5测试主从同步 17.1mysql主从介绍 MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主...

河图再现 ⋅ 今天 ⋅ 0

docker安装snmp rrdtool环境

以Ubuntu16:04作为基础版本 docker pull ubuntu:16.04 启动一个容器 docker run -d -i -t --name flow_mete ubuntu:16.04 bash 进入容器 docker exec -it flow_mete bash cd ~ 安装基本软件 ......

messud4312 ⋅ 今天 ⋅ 0

OSChina 周一乱弹 —— 快别开心了,你还没有女友呢。

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享吴彤的单曲《好春光》 《好春光》- 吴彤 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :小萝莉街上乱跑,误把我认错成...

小小编辑 ⋅ 今天 ⋅ 8

Java 开发者不容错过的 12 种高效工具

Java 开发者常常都会想办法如何更快地编写 Java 代码,让编程变得更加轻松。目前,市面上涌现出越来越多的高效编程工具。所以,以下总结了一系列工具列表,其中包含了大多数开发人员已经使用...

jason_kiss ⋅ 昨天 ⋅ 0

Linux下php访问远程ms sqlserver

1、安装freetds(略,安装在/opt/local/freetds 下) 2、cd /path/to/php-5.6.36/ 进入PHP源码目录 3、cd ext/mssql进入MSSQL模块源码目录 4、/opt/php/bin/phpize生成编译配置文件 5、 . ./...

wangxuwei ⋅ 昨天 ⋅ 0

如何成为技术专家

文章来源于 -- 时间的朋友 拥有良好的心态。首先要有空杯心态,用欣赏的眼光发现并学习别人的长处,包括但不限于工具的使用,工作方法,解决问题以及规划未来的能力等。向别人学习的同时要注...

长安一梦 ⋅ 昨天 ⋅ 0

Linux vmstat命令实战详解

vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况。这个命令是我查看Linux/Unix最喜爱的命令...

刘祖鹏 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部