websocket深入浅出-程序员宅基地

技术标签： websocket  JavaScript  ES6  

websocket简介

websocket是什么

答: 它是一种网络通信协议，是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

为什么需要websocket? 疑问? 我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？

答:

  • 因为 HTTP 协议有一个缺陷：通信只能由客户端发起
  • 我们都知道轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）, 因此websocket应运而生。

简介

WebSocket用于在Web浏览器和服务器之间进行任意的双向数据传输的一种技术。WebSocket协议基于TCP协议实现，包含初始的握手过程，以及后续的多次数据帧双向传输过程。其目的是在WebSocket应用和WebSocket服务器进行频繁双向通信时，可以使服务器避免打开多个HTTP连接进行工作来节约资源，提高了工作效率和资源利用率。

WebSocket目前支持两种统一资源标志符ws和wss，类似于HTTP和HTTPS。

实现原理

浏览器发出webSocket的连线请求，服务器发出响应，这个过程称为握手,握手的过程只需要一次，就可以实现持久连接。

握手与连接

浏览器发出连线请求,此时的request如下：

request

通过get可以表明此次连接的建立是以HTTP协议为基础的，返回101状态码。

如果不是101状态码，表示握手升级的过程失败了

101是Switching Protocols,表示服务器已经理解了客户端的请求，并将通过Upgrade 消息头通知客户端采用不同的协议来完成这个请求。在发送这个响应后的空档，将http升级到webSocket。

其中Upgrade和Connection字段告诉服务端，发起的是webSocket协议

Sec-WebSocket-Key是浏览器经过Base64加密后的密钥，用来和response里面的Sec-WebSocket-Accept进行比对验证

Sec-WebSocket-Version是当前的协议版本

Sec-WebSocket-Extensions是对WebSocket的协议扩展

服务器接到浏览器的连线请求返回结果如下：

response

Upgrade和Connection来告诉浏览器，服务已经是基于webSocket协议的了，让浏览器也遵循这个协议

Sec-WebSocket-Accept是服务端确认后并加密后的Sec-WebSocket-Accept

至此，webSocket连接成功，接下来就是webSocket的协议了。

客户端的简单示例

var ws = new WebSocket("wss://echo.websocket.org");

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.");
}; 

ws.onerror = function(evt) {
  console.log("error!!!"); 
};

客户端的 API

  • 以下 API 用于创建 WebSocket 对象
var ws = new WebSocket('ws://echo.websocket.org');
  • websocket 属性
ws.readyState
CONNECTING：值为0，表示正在连接。
OPEN：值为1，表示连接成功，可以通信了。
CLOSING：值为2，表示连接正在关闭。
CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

ws.bufferedAmount
只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。
  • WebSocket 事件
事件       事件处理程      描述
open     ws.onopen      连接建立时触发
message  ws.onmessage   客户端接收服务端数据时触发
error    ws.onerror     通信发生错误时触发
close    ws.onclose     连接关闭时触发

如果要指定多个回调函数，可以使用addEventListener方法

ws.addEventListener('open', function (event) {
   
    
  ws.send('Hello Server!');
});
ws.addEventListener("close", function(event) {
   
    
  ...
  // handle close event
});
ws.addEventListener("message", function(event) {
   
    
  var data = event.data;
  ...
  // 处理数据
});
  • websocket 方法
方法                  描述
ws.send()            使用连接发送数据
ws.close()           关闭链接

node 搭建服务器

ws模块

ws是一个websocket库，可以用了创建服务器。

新建server.js 输入以下代码

const WebSocket = require('ws');
 
const wss = new WebSocket.Server({
   
     port: 8181 });
 
wss.on('connection', function connection(ws) {
   
    
  ws.on('message', function(message){
   
    
    wss.clients.forEach(function(ws){
   
     // 看这里看这里  wss.clients 拿到所有的连接
          ws.send(message) // 发送消息
      })
  })
});

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_36422236/article/details/85051547

智能推荐

RabbitMq的交换机(Exchange)_convertandsend exchange-程序员宅基地

文章浏览阅读707次。在RabbitMQ中，生产者发送消息不会直接将消息投递到队列中，而是先将消息投递到交换机中，在由交换机转发到具体的队列， 队列再将消息以推送或者拉取方式给消费者进行消费 创建消息 路由键 pull/push 生产者------------>交换机------------>队列------------>消费者..._convertandsend exchange

Cybrics ctf_ecdsa ctf-程序员宅基地

文章浏览阅读517次。1.Signer阅读源码，同时nc一下我们会发现，该题是ECDSA签名。选项1是使用ECDSA对一个当前时间戳+salt进行签名，输出(R,S,HASH),。选项2是让我i们输入使用ECDSA对一个当前时间戳+get_flag进行签名的结果，输入正确获得flag。我们发现在签名过程中除了明文以外所用的参数都没有发生更改，所以我们可以使用k共享的方式对改签名进行攻击。其原理如下已知ECDSA的签名过程是，所以当我们有两组同参数的签名明文hash1,hash2和签名值(r,s1),(r,s2)，那么,。_ecdsa ctf

mysql load character_mysql load data Invalid utf8mb4 character string: ”-程序员宅基地

文章浏览阅读3.2k次。使用mysql的 load data 导入数据到 数据库中：LOAD DATA LOCAL INFILE '/tmp/2982/20200424/user.csv'INTO TABLE t_user CHARACTER SET utf8mb4 FIELDS TERMINATED BY ','LINES TERMINATED BY '\r\n'IGNORE 1 LINES(userName, use..._invalid utf8mb4 character string:

Java中的Map解析：探索键值对的奇妙世界_map键值对-程序员宅基地

文章浏览阅读543次。本文将深入解析Java中的Map接口及其常见实现类，详细介绍基本概念、常用方法、不同实现类的特点以及适用场景，帮助读者全面了解和灵活应用Map在Java编程中的威力。通过了解Map的基本概念、常用方法和不同实现类的特点，读者可以更加全面地理解和应用Map在Java编程中的重要性。因为TreeMap是有序的，所以在需要按照键的顺序访问的场景下非常有用。在Java中，有多个常见的Map实现类，每个实现类都有自己的特点和适用场景。根据具体的需求和场景，可以选择合适的Map实现类和相应的操作方法。_map键值对

编程实现下列功能：假设以两个元素依值非递减有序排列的顺序表A和B 分别表示两个集合（同一表中的元素值各不相同），求一个新的集合C=A-B，且表C中的元素也是依值递增有序排列。_建立两个按数据元素值非递减有序排列的线性表a和b,均以顺序表作为存储结构-程序员宅基地

文章浏览阅读3.1k次。编程实现下列功能：假设以两个元素依值非递减有序排列的顺序表A和B 分别表示两个集合（同一表中的元素值各不相同），求一个新的集合C=A-B，且表C中的元素也是依值递增有序排列。# include <stdio.h># include <stdlib.h># define initsize 20//初始分配量# define LISTINCREMENT 5//分配增量..._建立两个按数据元素值非递减有序排列的线性表a和b,均以顺序表作为存储结构

java readutf()方法,java socket writeUTF（）和readUTF（）-程序员宅基地

文章浏览阅读207次。I've been reading some Java socket code snippet and fonund out a fact that in socket communication, to send messages in sequence, you don't have to seperate them by hand, the writer/reader stream do t..._java socket writeutf

随便推点

ElasticSearch ES 安装 常见错误 Kibana安装 设置 权限 密码_wget 127.0.0.1:9200-程序员宅基地

文章浏览阅读2.2k次，点赞2次，收藏6次。最近在学习ES数据库，所以将一些东西记录一下。以下所有的都是基于es7.8.0版本进行的下载安装ES数据库安装本体下载地址 :linuxmac oswindowses的安装非常简单，基本都是解压然后运行就行了。这里我们就以linux版本为例子# 新建一个文件夹mkdir elasticSearch# 进入文件夹cd elasticSearch/# 下载安装包wget https://artifacts.elastic.co/downloads/elasticsearch/elas_wget 127.0.0.1:9200

微信小程序｜智慧物流小程序的设计与实现-程序员宅基地

文章浏览阅读1.8k次，点赞48次，收藏46次。语言环境：Java: jdk1.8数据库：Mysql: mysql5.7应用服务器：Tomcat: tomcat8.5.31开发工具：IDEA或eclipse技术：springboot+微信小程序+mysql+html+java互联网发展至今，无论是其理论还是技术都已经成熟，而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播，搭配信息管理工具可以很好地为人们提供服务。

浅谈Web安全-SQL注入_web安全测试 sql注入-程序员宅基地

文章浏览阅读7.4k次，点赞2次，收藏8次。简单的说,所谓SQL注入，就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。例如：如果用户在用户名文本框中输入 ' or '1' = '1' or '1' = '1，则验证的SQL语句变成： select * from student where username='' or '1' = '1' or '1' = '1' and password=''；_web安全测试 sql注入

国产化服务器内网安装onlyoffice_内网部署onlyoffice社区版-程序员宅基地

文章浏览阅读6k次，点赞4次，收藏30次。国产化服务器安装onlyoffice_内网部署onlyoffice社区版

基于Ardupilot/PX4固件，APM/PIXhawk硬件的VTOL垂直起降固定翼软硬件参数调试（第三篇）故障保护及问题诊断_ekf故障安全-程序员宅基地

文章浏览阅读1.4w次，点赞12次，收藏134次。基于Ardupilot/PX4固件，APM/PIXhawk硬件的VTOL垂直起降固定翼软硬件参数调试（第三篇）故障保护及问题诊断PIX无法安装驱动双击下载的px4_driver_installer_v10_win.exe驱动安装文件，Pixhawk驱动下载（点击即可下载）：http://www.inf.ethz.ch/personal/lomeier/downloads/px4_driver..._ekf故障安全

python opencv 实现图片,视频 转 字符/字符画/字符视频_python opencv字模转换-程序员宅基地

文章浏览阅读1.5k次，点赞2次，收藏19次。基于python 3.8图片转字符 升级版，顺便加了个 GUI地址：待定界面及使用图片转换时，界面会卡顿，表现为按钮按下去不会回弹，正常现象转换完成的图片视频在软件根目录视频转换请勿使用高分辨率，速度太慢，当然输入分辨率越高，转换后的分辨率也高参考 ： i5-7200u 实测 500x300 mp4, 每秒只能处理 1.5 帧效果（这里只能上图，视频就不做展示，效果参考图片）- 原图-图片转 txt图片转 txt文本- 图片转指定字符-jpg彩色同一个字符，通过颜色的变换展_python opencv字模转换

推荐文章

热门文章

相关标签