文档章节

Web API 接口之WebSocket

w-rain
 w-rain
发布于 2017/04/25 15:37
字数 853
阅读 1563
收藏 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
博文 52
码字总数 44008
作品 0
成都
程序员
加载中

评论(4)

w-rain
w-rain

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

Good Good Good
谢谢,我会继续努力的!:smiley:
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
从HTML5 WebSocket到Socket.io

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

Srtian
05/11
0
0
WebSocket 是什么原理?为什么可以实现持久连接?

作者:腾讯云技术社区 众所周知,Web应用的通信过程通常是客户端通过浏览器发出一个请求,服务器端接收请求后进行处理并返回结果给客户端,客户端浏览器将信息呈现。这种机制对于信息变化不是...

xiaogong1688
06/29
0
0
spring-boot框架下的websocket服务

这几天在做web端实时展示服务端日志文件新增内容的功能。要满足实时的需求,我选择的方案是在web端跟服务端建立一个websocket链接,由服务端通过tail -f 命令将文件新增内容发送给web端。 关...

lilugoodjob
07/02
0
0
WebSocket原理及技术简介

WebSocket用于在Web浏览器和服务器之间进行任意的双向数据传输的一种技术。WebSocket协议基于TCP协议实现,包含初始的握手过程,以及后续的多次数据帧双向传输过程。其目的是在WebSocket应用...

yaukie
07/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如何通过 J2Cache 实现分布式 session 存储

做 Java Web 开发的人多数都会需要使用到 session (会话),我们使用 session 来保存一些需要在两个不同的请求之间共享数据。一般 Java 的 Web 容器像 Tomcat、Resin、Jetty 等等,它们会在...

红薯
54分钟前
1
0
C++ std::thread

C++11提供了std::thread类来表示一个多线程对象。 1,首先介绍一下std::this_thread命名空间: (1)std::this_thread::get_id():返回当前线程id (2)std::this_thread::yield():用户接口...

yepanl
今天
2
0
Nignx缓存文件与动态文件自动均衡的配置

下面这段nginx的配置脚本的作用是,自动判断是否存在缓存文件,如果有优先输出缓存文件,不经过php,如果没有,则回到php去处理,同时生成缓存文件。 PHP框架是ThinkPHP,最后一个rewrite有关...

swingcoder
今天
1
0
20180920 usermod命令与用户密码管理

命令 usermod usermod 命令的选项和 useradd 差不多。 一个用户可以属于多个组,但是gid只有一个;除了gid,其他的组(groups)叫做扩展组。 usermod -u 1010 username # 更改用户idusermod ...

野雪球
今天
1
0
Java网络编程基础

1. 简单了解网络通信协议TCP/IP网络模型相关名词 应用层(HTTP,FTP,DNS等) 传输层(TCP,UDP) 网络层(IP,ICMP等) 链路层(驱动程序,接口等) 链路层:用于定义物理传输通道,通常是对...

江左煤郎
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部