WebSocket网络通信协议
WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。 HTTP 协议有一个缺陷：通信只能由客户端发起。这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用"轮询"：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。因此，工程师们一直在思考，有没有更好的方法。WebSocket 就是这样发明的。
WebSocket 如何工作？
Web浏览器和服务器都必须实现 WebSockets 协议来建立和维护连接。由于 WebSockets 连接长期存在，与典型的HTTP连接不同，对服务器有重要的影响。
基于多线程或多进程的服务器无法适用于 WebSockets，因为它旨在打开连接，尽可能快地处理请求，然后关闭连接。任何实际的 WebSockets 服务器端实现都需要一个异步服务器。
WebSocket特点
它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。
- 建立在 TCP 协议之上，服务器端的实现比较容易。
- 与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
- 数据格式比较轻量，性能开销小，通信高效。
- 可以发送文本，也可以发送二进制数据。
- 没有同源限制，客户端可以与任意服务器通信。
- 协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。
客户端 API
以下 API 用于创建 WebSocket 对象。
var Socket = new WebSocket(url, [protocol] ); 以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。
WebSocket 属性
以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象：
| 属性 | 描述 |
|---|---|
| Socket.readyState | 只读属性 readyState 表示连接状态，可以是以下值：0 - 表示连接尚未建立。1 - 表示连接已建立，可以进行通信。2 - 表示连接正在进行关闭。3 - 表示连接已经关闭或者连接不能打开。 |
| Socket.bufferedAmount | 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。 |
WebSocket 事件
以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象：
| 事件 | 事件处理程序 | 描述 |
|---|---|---|
| open | Socket.onopen | 连接建立时触发 |
| message | Socket.onmessage | 客户端接收服务端数据时触发 |
| error | Socket.onerror | 通信发生错误时触发 |
| close | Socket.onclose | 连接关闭时触发 |
WebSocket 方法
以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象：
| 方法 | 描述 |
|---|---|
| Socket.send() | 使用连接发送数据 |
| Socket.close() | 关闭连接 |
简单的例子
// 1.创建对象
var socket = new WebSocket('wss://echo.websocket.org');
socket.onopen = function(){//打开连接
console.log(socket.readyState)
socket.send('发送参数条件或数据');
console.log('数据发送.....');
} // 接收消息或数据
socket.onmessage = function(response){
console.log(socket.readyState)//查询连接状态
console.log(response);
// console.log('数据接收......')
} socket.onclose = function(){
console.log('数据关闭......');
}
// socket.close();//必要时候调用，会运行onclose函数
聊天室原理
- npm install nodejs-websocket 下载nodejs-websocket包
- 创建一个websocketServer.js
- 创建一个index.html
- 在黑窗口输入 node websocketServer.js
- 双击打开index.html即可
<!--websocketServer.js-->
var ws = require("nodejs-websocket")//引入包
var PORT = 3000;//设置端口号 var clientCount = 0//定义连接的次数 var server = ws.createServer(function (conn) {
console.log("New connection");
clientCount++;//连接累加,计算多少个人登录
conn.nickname = 'user'+clientCount;//设置简易用户名 var mes = {};
mes.type = 'enter';//标记，连接时，用户进入的提示信息
mes.data = conn.nickname+'comes in';
broadcast(JSON.stringify(mes)); conn.on("text", function (str) {//发送信息
console.log("Received "+str);
var mes = {};
mes.type = 'message';//标记，input输出的消息
mes.data = conn.nickname+":"+str;
broadcast(JSON.stringify(mes));
// broadcast(conn.nickname+":"+str);
// conn.sendText(str)
}) conn.on("close", function (code, reason) {//发送关闭连接信息
console.log("Connection closed")
var mes = {};
mes.type = 'leave';//标记，离开时的提示信息
mes.data = conn.nickname + ' left';
broadcast(JSON.stringify(mes));
}) conn.on('error',function(err){//捕抓报错信息
console.log('headle err');
console.log(err);
}) }).listen(PORT)
console.log('websocket server open.....'); function broadcast(str){
server.connections.forEach(function(connection){
connection.sendText(str);
})
}
<!--index.js-->
<body>
<h1>Call room</h1>
<input type="text" id="sendTxt">
<button id="sendBtn">发送</button>
<div id="recv"></div>
<script>
var websocket = new WebSocket("ws://localhost:3000");//创建websocket对象
function showMessage(str,type){//根据后台给出的标记判断，什么消息用什么颜色标记
var div = document.createElement('div');
div.innerHTML = str;
console.log(type);
if(type == 'enter'){
div.style.color = 'blue';
}else if(type == 'message'){
div.style.color = 'block';
}else if(type == 'leave'){
div.style.color = 'red';
}
document.body.appendChild(div);//将信息写到body上
}
websocket.onopen = function(){//打开连接，
console.log(websocket.readyState);//可查看连接状态
console.log('websocket open....');
document.getElementById('sendBtn').onclick = function(){//点击发送时，将信息send给ws服务器
var txt = document.getElementById('sendTxt').value;
if(txt){//如果消息不为空，发送消息
websocket.send(txt);
}
}
}
websocket.onclose = function(){//关闭连接
console.log('websocket close....');
}
websocket.onmessage = function(e){//接收消息，并格式化成JSON对象模式
console.log(e.data);
var mes = JSON.parse(e.data);
showMessage(mes.data,mes.type);//显示消息
} </script>
</body>
这样，我们就可以打开多个浏览器窗口去尝试连接这个websocket服务器
WebSocket网络通信协议的更多相关文章
- Cowboy 开源 WebSocket 网络库
Cowboy.WebSockets 是一个托管在 GitHub 上的基于 .NET/C# 实现的开源 WebSocket 网络库,其完整的实现了 RFC 6455 (The WebSocket Pro ...
- Java网络通信协议、UDP、TCP类加载整理
网络通信协议 网络通信协议 网络通信协议有很多种,目前应用最广泛的是TCP/IP协议(Transmission Control Protocal/Internet Protoal传输控制协议/英特网互 ...
- 网络通信协议tcp,udp区别
1 网络通信协议 Tcp udp的区别 重点(*****) Tcp三次握手四次挥手(******) udp客户端多人聊天 import socket udp_client = socket.socke ...
- day27 网络通信协议 tcp/udp区别
今日主要内容: 一.网络通信协议 二.tcp udp协议下的socket 一.网络通信协议 1.1互联网的本质就是一系列的网络协议 本机IP地址('127.0.0.1',xxxx) 互联网连接的电脑互 ...
- 网络通信协议简介（TCP与UDP）
通过计算机网络可以使多台计算机实现连接,位于同一个网络中的计算机在进行连接和通信时需要遵守一定的规则,这就好比在道路中行驶的汽车一定要遵守交通规则一样.在计算机网络中,这些连接和通信的规则被称为网络通 ...
- 第二十七天- 网络通信协议 TCP UDP 缓冲区
1.网络通信协议 osi七层模型:按照分工不同把互联网协议从逻辑上划分了层级 socket层 2.理解socket: Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计 ...
- Java第三阶段学习（八：网络通信协议、UDP与TCP协议）
一.网络通信协议 1.概念: 通过计算机网络可以使多台计算机实现连接,位于同一个网络中的计算机在进行连接和通信时需要遵守一定的规则,在计算机网络中,这些连接和通信的规则被称为网络通信协议,它对数据的传 ...
- JAVA基础之网络通信协议--TCP与UDP
个人理解: 了解区分UDP与TCP的不同,正常情况都是两者结合的使用模式!为了更好的传输,经常会开多线程进行传输的! 一.网络通信协议: 1.TCP/IP协议: 四层:应用层.传输层.网络层和链路层: ...
- sanic官方文档解析之websocket(网络套接字)和handle decorators(处理程序装饰器)
1,websocket(网络套接字) 在websocket上Sanic提供了一种简单使用的抽象化,来设置websocket(网络套接字) from sanic import Sanic from sa ...
随机推荐
- 压敏电阻的保护作用—NDF达孚电子科技
压敏电阻是常见的电子元器件之一,它的保护作用被大家熟知和运用.压敏电阻的主要用于在电路承受过压时进行电压钳位,吸收多余的电流以保护灵敏器件.压敏电阻的导电特性随着施加电压的变化呈非线性变化,它能保护电 ...
- 下载达 10 万次的 IDEA 插件，K8s 一键部署了解一下？
作者 | 铃儿响叮当 导读:涉及开发的技术人员,永远绕不开的就是将应用部署到相应服务器上,本文将给大家讲解:对于容器服务 ACK,怎么实现真正"一键部署",提高开发部署效率,在 K ...
- 巨杉Tech | SequoiaDB数据域及存储规划
1 背景近年来,企业的各项业务发展迅猛,客户数目不断增加,后台服务系统压力也越来越大,系统的各项硬件资源也变得非常紧张.因此,在技术风险可控的基础上,希望引入大数据技术,利用大数据技术优化现有IT系统 ...
- OptimalSolution(1)--递归和动态规划（1）斐波那契系列问题的递归和动态规划
一.斐波那契数列 斐波那契数列就是:当n=0时,F(n)=0:当n=1时,F(n)=1:当n>1时,F(n) = F(n-1)+F(n-2). 根据斐波那契数列的定义,斐波那契数列为(从n=1开 ...
- fenby C语言 P32
a[0] a[0][0] a[0][1] a[0][2] a[1] a[1][0] a[1][1] a[1][2]//一维数组 int a[2][3]//二维数组int (*p)[3]=a; #inc ...
- 这一次，彻底理解Promise源码思想
关于Promise的源码实现,网上有太多答案,我也看过很多资料,但都不是很明白.直到有一天我学完函数式编程之函子的概念,才对Promise源码有了更深刻的认识.今天,就让我们来重新认识一下Promis ...
- 图数据库PageRank算法
目录: 定义 计算原理 定义: 假设对象A具有指向它的对象T1 ... Tn.参数d是阻尼系数,取值范围在0和1之间,通常将d设置为0.85.C(A)被定义为从对象A出去的连接数. 对象A的PageR ...
- spring cloud 2.x版本 Feign服务发现教程(内含集成Hystrix熔断机制)
前言 本文采用Spring cloud本文为2.1.8RELEASE,version=Greenwich.SR3 本文基于前两篇文章eureka-server和eureka-client的实现. 参考 ...
- JavaFX简介和Scene Builder工具的安装使用简易教程
JavaFX概述和简介 富互联网应用是那些提供与Web应用程序类似的功能,并可作为桌面应用程序体验的应用.与用户的正常网络应用程序相比,它们提供更好的视觉体验.这些应用程序可作为浏览器插件或作为虚拟机 ...
- Leetcode算法【34在排序数组中查找元素】
在之前ARTS打卡中,我每次都把算法.英文文档.技巧都写在一个文章里,这样对我的帮助是挺大的,但是可能给读者来说,一下子有这么多的输入,还是需要长时间的消化. 那我现在改变下方式,将每一个模块细分化, ...