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 ...
随机推荐
- Yii 数据库重连告别General error: 2006 MySQL server has gone away
General error: 2006 MySQL server has gone away 错误原因 制造错误 解决办法 最新办法 错误原因 Mysql has gone away MySQL 服务 ...
- JVM垃圾收集策略与算法
垃圾收集策略与算法 程序计数器.虚拟机栈.本地方法栈随线程而生,也随线程而灭:栈帧随着方法的开始而入栈,随着方法的结束而出栈.这几个区域的内存分配和回收都具有确定性,在这几个区域内不需要过多考虑回收的 ...
- Jquery动态bind绑定已有函数，函数自动执行的问题解决方法
在bind后面的方法,不能带括号,带括号函数就自动执行了... <script> //通过子元素删除某行 function deleteRow() { var flag = confirm ...
- html2canvas 生成电子合同书
首先给合同书父级加个ref 然后用html2canvas 插件 然后html2canvas 坑区来了,生成页面的时候,合同书是很长的.他有一部分是黑色的, 最开始从前辈们了解到是滚至顶部解决偏移.然后 ...
- python全局变量及局部变量
变量作用域 全局变量(global):在函数外部定义,在整个全局范围都有效 局部变量(local) 在函数内部定义,局部变量在局部范围内使用 数字,字符串,元组,修改其变量值时需要加globle,列表 ...
- C++学习笔记10_输入输出流.文件读写
//从键盘输入到程序,叫标准input:从程序输出到显示器,叫标准output:一并叫标准I/O //文件的输入和输出,叫文件I/O cout<<"hellow word&quo ...
- MIT线性代数：12.图和网络
- mysql多种备份与恢复方式一
基于mysql社区版5.7,严重声明:本文中图方便直接写入了-p数据库密码,在生产环境中如果指定了一定要使用history -C清空历史命令记录哦,所有博客作者原创纯手打,转载一定要注明本博客链接,感 ...
- [专题总结]矩阵树定理Matrix_Tree及题目&题解
专题做完了还是要说两句留下什么东西的. 矩阵树定理通俗点讲就是: 建立矩阵A[i][j]=edge(i,j),(i!=j).即矩阵这一项的系数是两点间直接相连的边数. 而A[i][i]=deg(i). ...
- 差异：后缀数组（wzz模板理解），单调栈
因为涉及到对模板的理解,所以就着代码看会好一些. 让那些坚决不颓代码的人受委屈了. 我是对着wzz的板子默写的,可能不完全一样啊. 还有代码注释里都是我个人的理解,不保证正确,但欢迎指正. 可以有选择 ...