WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。 HTTP 协议有一个缺陷：通信只能由客户端发起。这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用"轮询"：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。因此，工程师们一直在思考，有没有更好的方法。WebSocket 就是这样发明的。

WebSocket 如何工作？

Web浏览器和服务器都必须实现 WebSockets 协议来建立和维护连接。由于 WebSockets 连接长期存在，与典型的HTTP连接不同，对服务器有重要的影响。

基于多线程或多进程的服务器无法适用于 WebSockets，因为它旨在打开连接，尽可能快地处理请求，然后关闭连接。任何实际的 WebSockets 服务器端实现都需要一个异步服务器。

WebSocket特点

它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

  1. 建立在 TCP 协议之上，服务器端的实现比较容易。
  2. 与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
  3. 数据格式比较轻量，性能开销小，通信高效。
  4. 可以发送文本，也可以发送二进制数据。
  5. 没有同源限制，客户端可以与任意服务器通信。
  6. 协议标识符是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函数

聊天室原理

  1. npm install nodejs-websocket 下载nodejs-websocket包
  2. 创建一个websocketServer.js
  3. 创建一个index.html
  4. 在黑窗口输入 node websocketServer.js
  5. 双击打开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网络通信协议的更多相关文章

  1. Cowboy 开源 WebSocket 网络库

    Cowboy.WebSockets 是一个托管在 GitHub 上的基于 .NET/C# 实现的开源 WebSocket 网络库,其完整的实现了 RFC 6455 (The WebSocket Pro ...

  2. Java网络通信协议、UDP、TCP类加载整理

    网络通信协议 网络通信协议 网络通信协议有很多种,目前应用最广泛的是TCP/IP协议(Transmission Control Protocal/Internet Protoal传输控制协议/英特网互 ...

  3. 网络通信协议tcp,udp区别

    1 网络通信协议 Tcp udp的区别 重点(*****) Tcp三次握手四次挥手(******) udp客户端多人聊天 import socket udp_client = socket.socke ...

  4. day27 网络通信协议 tcp/udp区别

    今日主要内容: 一.网络通信协议 二.tcp udp协议下的socket 一.网络通信协议 1.1互联网的本质就是一系列的网络协议 本机IP地址('127.0.0.1',xxxx) 互联网连接的电脑互 ...

  5. 网络通信协议简介（TCP与UDP）

    通过计算机网络可以使多台计算机实现连接,位于同一个网络中的计算机在进行连接和通信时需要遵守一定的规则,这就好比在道路中行驶的汽车一定要遵守交通规则一样.在计算机网络中,这些连接和通信的规则被称为网络通 ...

  6. 第二十七天- 网络通信协议 TCP UDP 缓冲区

    1.网络通信协议 osi七层模型:按照分工不同把互联网协议从逻辑上划分了层级 socket层 2.理解socket: Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计 ...

  7. Java第三阶段学习（八：网络通信协议、UDP与TCP协议）

    一.网络通信协议 1.概念: 通过计算机网络可以使多台计算机实现连接,位于同一个网络中的计算机在进行连接和通信时需要遵守一定的规则,在计算机网络中,这些连接和通信的规则被称为网络通信协议,它对数据的传 ...

  8. JAVA基础之网络通信协议--TCP与UDP

    个人理解: 了解区分UDP与TCP的不同,正常情况都是两者结合的使用模式!为了更好的传输,经常会开多线程进行传输的! 一.网络通信协议: 1.TCP/IP协议: 四层:应用层.传输层.网络层和链路层: ...

  9. sanic官方文档解析之websocket(网络套接字)和handle decorators(处理程序装饰器)

    1,websocket(网络套接字) 在websocket上Sanic提供了一种简单使用的抽象化,来设置websocket(网络套接字) from sanic import Sanic from sa ...

随机推荐

  1. java web项目下的lib和build path 中jar包问题解惑

    一.build path&WEB-INFO/lib介绍 build path:可以说是引用: WEB-INFO/lib:可以说是固定在一个地方: eclipse编译项目的时候是根据build ...

  2. 图像处理 - ImageMagick 简单介绍与案例

    在客户端我们可以用 PhotoShop 等 GUI 工具处理静态图片或者动态 GIF 图片,不过在服务器端对于 WEB 应用程序要处理图片格式转换,缩放裁剪,翻转扭曲,PDF解析等操作, GUI 软件 ...

  3. 学习python3高阶函数笔记和demo

    python的高阶函数的定义是:一个函数接收另一个函数作为参数,这种函数就称之为高阶函数 举一个最简单的例子: def text(a,b,c): return c(a)+c(b) print( tex ...

  4. Swagger--解决日期格式显示为Unix时间戳格式 UTC格式

    在swagger UI模型架构上,字段日期显示为“日期”:“2018-10-15T09:10:47.507Z”但我需要将其作为“日期”:“2018-9-26 12:18:48”. tips:以下这两种 ...

  5. Spring框架 --- 深入

    1.Spring IOC IOC技术: 控制反转,也叫(依赖注入) 控制反转:Bean的生命周期不受你控制,而是交给Spring容器管理. Spring框架如何利用IOC ?:        实现了控 ...

  6. (day29) 进程互斥锁 + 线程

    目录 进程互斥锁 队列和堆栈 进程间通信(IPC) 生产者和消费者模型 线程 什么是线程 为什么使用线程 怎么开启线程 线程对象的属性 线程互斥锁 进程互斥锁 进程间数据不共享,但是共享同一套文件系统 ...

  7. day07整理(内置方法\循环判断)

    目录 一.上节课回顾 (一)if判断 1.单分支结构 2.双分支结构 3.多分支结构 (二)for循环 1.for + break 2.for + continue 3.for循环嵌套 (三)robu ...

  8. python中的可变数据类型和不可变数据类型

    1.不可变数据类型:数值.字符串.元组 不允许变量的值发生变化,如果变量的值变化了,那么就是新建了一个对象:对于相同值的对象,在内存中只有一个对象. 2.可变数据类型:列表.字典 允许变量的值发生变化 ...

  9. 第八篇 Flask中的蓝图

    随着业务代码的增加,将所有代码都放在单个程序文件中,是非常不合适的.这不仅会让代码阅读变得困难,而且会给后期维护带来麻烦.如下示例:我们在一个文件中写入多个路由,这会使代码维护变得困难. 如图所示,如 ...

  10. spring boot 面试题详解

    1.什么是springboot 用来简化spring应用的初始搭建以及开发过程 使用特定的方式来进行配置(properties或yml文件) 创建独立的spring引用程序 main方法运行 嵌入的T ...