IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 网络协议 -> HTML5(十一)——WebSocket 基础教程 -> 正文阅读

[网络协议]HTML5(十一)——WebSocket 基础教程

一、为什么要学 WebSocket?

websocket 是 HTML5 提供的一种长链接双向通讯协议,使得客户端和服务器之间的数据交换更简单,允许服务端主动向客户端推送数据,并且客户端与服务端只需连接一次,就可以保持长久连接,并进行数据通信。

websocket 与 http 区别:

  • http 链接分为长链接、短链接,短链接是发送一个请求,返回一个响应,长链接是在一定周期内保持链接。但是 websocket 只需连接一次就可以保持长链接,不需要的时候可以手动断开。
  • http 通信中,客户端是主动的,服务端是被动的。但是 websocket,服务端可以主动向客户端推送数据。
  • http 通过轮询建立的长链接,多次建立 request / response 会产生冗余的头部信息。

ajax 轮询与 websocket 通信原理如图:

HTML5(十一)——WebSocket 基础教程

websocket 就是为了解决客户端发起多个 http 请求到服务器资源,浏览器必须要经过长时间的,轮询问题而生的,实现多路复用。它最大特点就是服务器可以主动向客户端推送信息。

二、WebSocket 对象

2.1、创建对象:

let ws = new WebSocket( url , [ protocol ] )

url:指定连接的后台服务地址。

protocol:指定可接受的子协议,是可选参数。

2.2、对象属性

readyState:表示连接状态,是一个只读属性。

使用语法:ws.readyState

返回的值有4个,分别表示的意义:

  • 0 - 未建立连接
  • 1 - 已建立连接,可正常通信
  • 2 - 连接正在进行关闭
  • 3 - 连接已经关闭或断开,无法通信

bufferedAmount:已被放入等待传输队列,但是还没有发出的 UTF-8 文本字节数,也是只读属性。

2.3、对象事件

onopen - 连接时触发,用于指定连接成功后的回调函数。

使用语法:

// 方法一 :只可以指定一个回调函数
ws.onopen = function(){

}
//方法二 :可以指定多个回调函数
ws.addEventListener('open',function(){

})

onclose - 关闭时触发,指定连接关闭时回调函数。

使用语法:与 onopen 完全一致。

onmessage - 客户端接收服务端数据时触发,指定回调函数。

使用语法:

// 方法一:
ws.inmessage = function(event){
	let data = event.data
  //服务器传给客户端的数据
}
// 方法二:
ws.addEventListener('inmessage', function(event){
	let data = event.data
  //服务器传给客户端的数据
})

onerror - 通信发生错误时触发,并指定回调函数。

使用语法:

//方法一
ws.onerror = function(){
//错误处理
}
//方法二
ws.addEventListener('error',function(){
//错误处理
})

2.3、对象事件

send - 用于向服务器发送数据。

使用语法:

ws.send( data )

data :是发给服务器的数据,这个数据可以是字符串、数组、json、Blob 对象或 ArrayBuffer 对象等。

如发送 Blob 对象例子:

var file = document.querySelector('input='file'').files[0]
ws.send(file)

close - 关闭连接

使用语法:

ws.close()
  网络协议 最新文章
使用Easyswoole 搭建简单的Websoket服务
常见的数据通信方式有哪些?
Openssl 1024bit RSA算法---公私钥获取和处
HTTPS协议的密钥交换流程
《小白WEB安全入门》03. 漏洞篇
HttpRunner4.x 安装与使用
2021-07-04
手写RPC学习笔记
K8S高可用版本部署
mySQL计算IP地址范围
上一篇文章      下一篇文章      查看所有文章
加:2021-08-17 15:45:03  更:2021-08-17 15:45:55 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/17 17:37:45-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码