您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

js实现websocket 数据交互

时间:2019-09-05 12:05:11  来源:  作者:

服务器端推送技术在web开发中比较常用,在早期最简单的解决方案是采用ajax向服务器轮询消息,这种方式的轮询频率不好控制,会导致服务器的压力。稍优的方案为:当客户端向服务器发送请求时,服务器端会抓住这个请求不放,等有数据更新的时候才返回给客户端,当客户端接收到数据后再次发送请求,周而复始,这样就大大减少了请求次数,减轻了服务器的压力。这里我么使用webSokcet实现服务器端消息推送。

下面我们一次说一下什么是 websocket 已经如何实用js 实现对websocket 数据的获取,并实现数据交互的长连接。

1. 什么是websocket及特点:

由于http请求只能由客户端发起,所有当服务器资源有变化时,客户端只能通过轮询的方式。非常浪费资源。

websocket的特点:

服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种建立在 TCP 协议之上,服务器端的实现比较容易可以发送文本,也可以发送二进制数据没有同源限制,客户端可以与任意服务器通信协议标识符是ws(如果加密,则为wss),服务器网址就是 URL。如ws:localhost:8081/msg.

2. JS示例

var ws = new WebSocket("ws://localhost:8080/msg");
ws.onopen = function(evt) {
	console.log("Connection open ...");
	ws.send("Hello WebSockets!");
};
ws.onmessage = function(evt) {
	console.log("Received Message: " + evt.data);
	ws.close();
};
ws.onclose = function(evt) {
	console.log("Connection closed.");
};

3. api

1. websocket构造函数

用于创建一个webSocket实例,执行后,客户端就会与服务端连接

var ws = new WebSocket("ws://localhost:8080/msg");

2. webSocket.readyState

readyState属性返回实例对象的当前状态,共有四种。

CONNECTING:值为0,表示正在连接。
OPEN:值为1,表示连接成功,可以通信了。
CLOSING:值为2,表示连接正在关闭。
CLOSED:值为3,表示连接已经关闭,或者打开连接失败
例如:if(ws.readyState ==WebSocket.CONNECTING){}

3. webSocket.onopen

用于指定连接成功后的回调函数

ws.onopen = function(evt) {
	console.log("Connection open ...");
	ws.send("Hello WebSockets!");
};

或者:

ws.addEventListener('open', function (event) {
 ws.send('Hello Server!');
});

4. webSocket.onclose

用于指定连接关闭后的回调函数。

ws.onclose = function(event) {
 var code = event.code;
 var reason = event.reason;
 var wasClean = event.wasClean;
};
ws.addEventListener("close", function(event) {
 var code = event.code;
 var reason = event.reason;
 var wasClean = event.wasClean;
});

5. webSocket.onmessage

用于指定收到服务器数据后的回调函数

ws.onmessage = function(event) {
 var data = event.data;
};
 
ws.addEventListener("message", function(event) {
 var data = event.data;
});

服务器数据有可能是文本,也有可能是二进制数据,需要判断

ws.onmessage = function(event){
 if(typeof event.data === String) {
 console.log("Received data string");
 }
 
 if(event.data instanceof ArrayBuffer){
 var buffer = event.data;
 console.log("Received arraybuffer");
 }
}

除了动态判断收到的数据类型,也可以使用binaryType属性,显式指定收到的二进制数据类型

// 收到的是 blob 数据

ws.binaryType = "blob";

ws.onmessage = function(e) {
 console.log(e.data.size);
};
 
// 收到的是 ArrayBuffer 数据
ws.binaryType = "arraybuffer";
ws.onmessage = function(e) {
 console.log(e.data.byteLength);
};

6. webSocket.send()

send方法用于向服务器发送数据

发送文本

ws.send("Hello WebSockets!");

发送Blob数据

var file = document
 .querySelector('input[type="file"]')
 .files[0];
ws.send(file);
发送ArrayBuffer
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];
}
ws.send(binary.buffer);

7. webSocket.bufferedAmount

bufferedAmount属性,表示还有多少字节的二进制数据没有发送出去。它可以用来判断发送是否结束

var data = new ArrayBuffer(10000000);
socket.send(data);
 
if (socket.bufferedAmount === 0) {
 // 发送完毕
} else {
 // 发送还没结束
}

8. webSocket.onerror

用于指定报错时的回调函数

ws.onerror = function(event) {
};
 
es.addEventListener("error", function(event) {
});

至此,一个基于JS的WebSocket通信实例构建完毕。



Tags:js   点击:()  评论:()
声明:本站部分内容来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除,谢谢。
▌相关评论
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
▌相关推荐
最近话不多,直接看代码和结果好伐?一、var定义://一般情况var word = "Hello World";console.log(word);//输出:Hello World//变量提升?console.log(word);var word = "Hello Wor...【详细内容】
2020-07-09   js  点击:(2)  评论:(0)  加入收藏
Node.js允许程序员在服务器端使用Javascript语言和脚本,这很快导致它在全世界范围内被迅速采用。Node.js在过去十年里慢慢爬上了流行的阶梯,并根据这次Stack overflow的调查,...【详细内容】
2020-07-09   js  点击:(2)  评论:(0)  加入收藏
前言本篇文章适用于Node.js(Express后台)+MongoDB开发的项目流程1.远程连接到服务器可以登录阿里云远程连接到自己的服务器,也可以使用git-bash登录:ssh root@公网IP2.更新aptap...【详细内容】
2020-07-04   js  点击:(1)  评论:(0)  加入收藏
NodeJS是服务器端JavaScript,是为在网络应用程序框架内实现高性能而开发的,并针对并发环境进行了优化。它是使用命令行工具,用JavaScript和C ++编写。它借助后端JavaScript代码...【详细内容】
2020-07-02   js  点击:(3)  评论:(0)  加入收藏
0x00 前言漏洞背景hw时期在电信三巨头之一旗下的子公司出差,做一下渗透测试。公网的业务主挖逻辑漏洞,但是每次挖着挖着就变成了CSRF攻击,出差半个月算是把这辈子的CSRF都给挖...【详细内容】
2020-06-26   js  点击:(2)  评论:(0)  加入收藏
功能 Amis 基于 bootstrap 基于 typescript 代码开发友好 支持 json 配置渲染逻辑复杂的表单或页面,该功能十分强大 拥有齐全的 admin 组件库,完全满足一般管理系统需求 该框...【详细内容】
2020-06-26   js  点击:(1)  评论:(0)  加入收藏
环境:远程系统 : deepIn 15.11本地系统:windows 7nodejs : 12.13.01.程序部署将nodejs程序同时放到远程系统和本地系统$ tree.├── index.js└── node_modules └── ex...【详细内容】
2020-06-26   js  点击:(1)  评论:(0)  加入收藏
作者:诀九 前端名狮转发链接: https://mp.weixin.qq.com/s/BMg8bFUwa4gmm6v2acAe7Q前言在头条发布文章时,需要为文章配置一个封面图片。我的常规做法就是网上搜一张图片,然后利...【详细内容】
2020-06-22   js  点击:(0)  评论:(0)  加入收藏
今天我们来聊聊js引擎JavaScript很酷,但是机器如何才能真正理解您编写的代码?作为JavaScript开发人员,我们通常不必自己处理编译器。但是,一定要了解JavaScript引擎的基础知识,看...【详细内容】
2020-06-18   js  点击:(1)  评论:(0)  加入收藏
工作中需要查看一些网站的JS语句,打心眼里对这种语法充满了鄙夷,优雅跟它没关系,一些烂写法很难读懂,简直就是反人类,太变态了。下面举个小例子,因为篇幅原因,就复制了一小段,看看你...【详细内容】
2020-06-17   js  点击:(4)  评论:(0)  加入收藏
1. 事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题。考虑下面这段代码,就不写html->head,body之类...【详细内容】
2020-06-11   js  点击:(1)  评论:(0)  加入收藏
在动态Web项目的开发中,经常需要动态生成HTML。内容(如系统中的当前在线人数需要动态生成)。如果使用Servlet实现HTML页面数据的统计,则需要使用大量的输出语句。同时,如果静态...【详细内容】
2020-06-09   js  点击:(0)  评论:(0)  加入收藏
前言:写代码的过程中,难免会发生各种错误,而发出去的代码也可能收到用户浏览器报回来的各种错误需要查问题。了解这些报错发生的原因以及出现的浏览器可以帮助我们更快的找到...【详细内容】
2020-05-25   js  点击:(0)  评论:(0)  加入收藏
JS代码为什么要进行混淆加密?因为:JS代码是明文。JS是种开放源码的编程语言,无论是前端浏览器中的JS代码,还是在后端使用,如nodejs,js代码都是明文,明文代码,他人可以随意查看、复制...【详细内容】
2020-05-17   js  点击:(0)  评论:(0)  加入收藏
浏览器加载页面是按从上到下顺序加载的。加载 JS 并执行的时候,会阻塞其他资源的加载。这是因为 JS 可能会有 DOM 、样式等等操作,所以浏览器要先加载这段 JS 并执行,再加载放...【详细内容】
2020-05-14   js  点击:(4)  评论:(0)  加入收藏
前言前端开发有时会处理一部分后台返回的数据,或者根据数据判断做一些处理; 这个时候就非常有必要将一些常用的工具类封装起来; 本文根据常用的一些工具类封装了 59 个方...【详细内容】
2020-05-11   js  点击:(3)  评论:(0)  加入收藏
一.Node.js 缔造的传奇I have a job now, and this guy is the reason why I have that now. His hobby project is what I use for living. Thanks. —— Shajan...【详细内容】
2020-04-30   js  点击:(3)  评论:(0)  加入收藏
学习目标1)了解分布式文件系统的概念及应用场景2)理解fastDFS的工作原理3)掌握fastDFS存取文件方法4)基于SpringBoot+fastDSf+vue.js实现图片服务1 什么是分布式文件系统1.1 技...【详细内容】
2020-04-27   js  点击:(5)  评论:(0)  加入收藏
今天我将向大家演示如何使用 React Profiler API、Tracing API 以及 User Timing API 来分别追踪 React 的组件渲染、用户交互以及自定义性能指标。...【详细内容】
2020-04-25   js  点击:(2)  评论:(0)  加入收藏
前几天,作者遇到了这样一种情况,需要在一个让web3.py几乎不可能工作的环境中使用Python与Ethereum网络进行通信。...【详细内容】
2020-04-23   js  点击:(8)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条