WebSocket总结

最新推荐文章于 2023-05-23 01:23:05 发布
最新推荐文章于 2023-05-23 01:23:05 发布
阅读量740 收藏 3
点赞数
分类专栏： 网络编程 文章标签： http java 网络协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qililong88/article/details/108645726
版权

IM通讯项目中用到了WebSocket建立连接，这里做一个简单地整理总结：

一句话总结一下 WebSocket：

WebSocket 是 HTML5 开始提供的一种独立在单个 TCP 连接上进行全双工通讯的有状态的协议(它不同于无状态的 HTTP)，并且还能支持二进制帧、扩展协议、部分自定义的子协议、压缩等特性。

一、Socket简介

Socket又称‘套接字‘，应用程序通常通过‘套接字‘向网络发出请求或者应答网络请求。Socket可以实现应用程序间网络通信。
这里写图片描述
Socket可以使用TCP／IP协议或者UDP协议
TCP／IP协议
TCP／IP协议是目前最为广泛的协议，是构成Internet国际互联网协议的最为基础的协议，由TCP和IP协议组成。
TCP协议：是面向连接的，可靠的、基于字节流的传输层通信协议，负责数据的可靠性传输问题。
IP协议：用于报文交换网络的一种面向数据的协议，主要负责给每台网络设备一个网络地址，保证数据传输到正确的目的地。
UDP协议
无连接、不可靠、基于报文的传输层协议，优点是发送后不用管，速度比TCP快。

二、WebSocket简介与消息推送

B／S架构的系统多使用HTTP协议
HTTP协议的特点
1无状态协议
2用于通过Internet发送请求消息和响应消息
3使用端口接收和发送消息，默认端口80
HTTP协议决定了服务器与客户端之间的连接方式，无法直接实现双向通信与消息推送，一些变相的解决办法：
轮询polling：客户端定时向服务器发送Ajax请求，服务器接到请求后马上返回响应信息并关闭连接。请求中大半是无用的，浪费带宽和服务器资源。
长轮训Long polling：客户端定时向服务器发送Ajax请求，服务器接到请求后Hold住连接，直到有消息才返回响应信息并关闭连接，客户端处理完响应信息后再向服务器发送新的请求。在无消息的情况下不会频繁的请求，耗资少，但是服务器hold住连接会消耗资源，返回数据无保障。
长连接：在页面里嵌入一个隐蔵iframe，将这个隐蔵iframe的src属性设为对一个长连接的请求或是采用xhr请求，服务器端就能源源不断地往客户端输入数据。 优点：消息即时到达，不发无用请求；管理起来也相对便。 缺点：服务器维护一个长连接会增加开销。 实例：Gmail聊天
WebSocket：是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。依靠这种技术可以实现客户端和服务器端的长连接，双向实时通信。
特点:
事件驱动
异步
使用ws或者wss协议的客户端socket
能够实现真正意义上的推送功能

缺点：
少部分浏览器不支持，浏览器支持的程度与方式有区别。

WebSocket与Socket的关系

Socket其实并不是一个协议，而是为了方便使用TCP或UDP而抽象出来的一层，是位于应用层和传输控制层之间的一组接口。

Socket是应用层与TCP/IP协议族通信的中间软件抽象层，它是一组接口。在设计模式中，Socket其实就是一个门面模式，它把复杂的TCP/IP协议族隐藏在Socket接口后面，对用户来说，一组简单的接口就是全部，让Socket去组织数据，以符合指定的协议。

当两台主机通信时，必须通过Socket连接，Socket则利用TCP/IP协议建立TCP连接。TCP连接则更依靠于底层的IP协议，IP协议的连接则依赖于链路层等更低层次。

WebSocket则是一个典型的应用层协议。

 

区别

Socket是传输控制层协议，WebSocket是应用层协议。

 

三、WebSocket客户端

websocket允许通过JavaScript建立与远程服务器的连接，从而实现客户端与服务器间双向的通信。在websocket中有两个方法：
1、send() 向远程服务器发送数据
2、close() 关闭该websocket链接
websocket同时还定义了几个监听函数
1、onopen 当网络连接建立时触发该事件
2、onerror 当网络发生错误时触发该事件
3、onclose 当websocket被关闭时触发该事件
4、onmessage 当websocket接收到服务器发来的消息的时触发的事件，也是通信中最重要的一个监听事件。msg.data
websocket还定义了一个readyState属性，这个属性可以返回websocket所处的状态：
1、CONNECTING(0) websocket正尝试与服务器建立连接
2、OPEN(1) websocket与服务器已经建立连接
3、CLOSING(2) websocket正在关闭与服务器的连接
4、CLOSED(3) websocket已经关闭了与服务器的连接
websocket的使用：
websocket的url开头是ws，如果需要ssl加密可以使用wss，当我们调用websocket的构造方法构建一个websocket对象（new WebSocket(url)）的之后，就可以进行即时通信了。

在项目实际开发中我们往往使用SpringMVC提供的对WebSocket封装，如下：

public class ImSellerController extends TextWebSocketHandler {
并且重写下边这些方法：
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {....} @Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {...}
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {....}
}

四、WebSocket建立连接过程

客户端开始建立WebSocket连接时要发送一个header标记了 Upgrade的HTTP请求，表示请求协议升级。所以服务器端做出响应的简便方法是，直接在现有的HTTP服务器软件和现有的端口上实现WebSocket协议，然后再回一个状态码为101的HTTP响应完成握手，再往后发送数据时就没 HTTP的事了。也就是说WebSocket只是使用HTTP协议来完成一部分握手。

通过HTTP握手

  1. Browser与WebSocket服务器通过TCP三次握手建立连接，如果这个建立连接失败，那么后面的过程就不会执行，Web应用程序将收到错误消息通知。

  2. 在TCP建立连接成功后，Browser/UA通过http协议传送WebSocket支持的版本号，协议的字版本号，原始地址，主机地址等等一些列字段给服务器端。

握手部分的设计目的就是兼容现有的基于HTTP的服务端组件（web服务器软件）或者中间件（代理服务器软件）。这样一个端口就可以同时接受普通的HTTP请求或则WebSocket请求了。为了这个目的，WebSocket客户端的握手是一个 HTTP升级版的请求（HTTP Upgrade request）：

客户端发送一个请求

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

这段类似HTTP协议的握手请求中多了以下几个东西

Upgrade: websocket
Connection: Upgrade
是告诉服务器我想升级为websocket协议

Sec-WebSocket-Key是一个Base64加密的密钥
Sec-WebSocket-Protocol是用于标识客户端想和服务端使用哪一种子协议（都是应用层的协议，比如 chat 表示采用 “聊天” 这个应用层协议）。
Sec-WebSocket-Version是告诉服务器所使用的协议版本
OriginOrigin可以预防在浏览器中运行的脚本，在未经 WebSocket 服务器允许的情况下，对其发送跨域的请求。浏览器脚本在使用浏览器提供的 WebSocket 接口对一个 WebSocket 服务发起连接请求时，浏览器会在请求的 Origin 中标识出发出请求的脚本所属的源，然后 WebSocket 在接受到浏览器的连接请求之后，就可以根据其中的源去选择是否接受当前的请求。

比如我们有一个 WebSocket 服务运行在 http://websocket.example.com，然后你打开一个网页 http://another.example.com，在个 another 的页面中，有一段脚本试图向我们的 WebSocket 服务发起链接，那么浏览器在其请求的头中，就会标注请求的源为 http://another.example.com，这样我们就可以在自己的服务中选择接收或者拒绝该请求。

服务端响应

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

上面提到了这个101是状态码，websocket是使用 HTTP 协议的101状态码进行协议切换。

Sec-WebSocket-Accept这个值表示服务器同意握手建立连接，是客户端传输过来的Sec-WebSocket-Key跟“258EAFA5-E914-47DA-95CA-C5AB0DC85B11”拼接后，用SHA-1加密，并进行BASE-64编码得来的,Sha1(Sec-WebSocket-Key+258EAFA5-E914-47DA-95CA-C5AB0DC85B11)。

客户端收到Sec-WebSocket-Accept后，将本地的Sec-WebSocket-Key进行同样的编码，然后比对。

 

五、socket中TCP的三次握手建立连接详解

我们知道tcp建立连接要进行“三次握手”，即交换三个分组。大致流程如下：

  • 客户端向服务器发送一个SYN J
  • 服务器向客户端响应一个SYN K，并对SYN J进行确认ACK J+1
  • 客户端再想服务器发一个确认ACK K+1

只有就完了三次握手，但是这个三次握手发生在socket的那几个函数中呢？请看下图：

image

图1、socket中发送的TCP三次握手

从图中可以看出，当客户端调用connect时，触发了连接请求，向服务器发送了SYN J包，这时connect进入阻塞状态；服务器监听到连接请求，即收到SYN J包，调用accept函数接收请求向客户端发送SYN K ，ACK J+1，这时accept进入阻塞状态；客户端收到服务器的SYN K ，ACK J+1之后，这时connect返回，并对SYN K进行确认；服务器收到ACK K+1时，accept返回，至此三次握手完毕，连接建立。

为什么需要三次握手，而非两次

TCP 协议为了实现可靠传输， 通信双方需要判断自己已经发送的数据包是否都被接收方收到， 如果没收到， 就需要重发。 为了实现这个需求， 很自然地就会引出序号（sequence number） 和 确认号（acknowledgement number） 的使用。

为了实现可靠传输，发送方和接收方始终需要同步( SYNchronize )序号。 需要注意的是， 序号并不是从 0 开始的， 而是由发送方随机选择的初始序列号 ( Initial Sequence Number, ISN )开始 。 由于 TCP 是一个双向通信协议， 通信双方都有能力发送信息， 并接收响应。 因此， 通信双方都需要随机产生一个初始的序列号， 并且把这个起始值告诉对方。

于是， 这个过程就变成了下面这样。
在这里插入图片描述

四、socket中TCP的四次握手释放连接详解

上面介绍了socket中TCP的三次握手建立过程，及其涉及的socket函数。现在我们介绍socket中的四次握手释放连接的过程，请看下图：

image

图2、socket中发送的TCP四次握手

图示过程如下：

  • 某个应用进程首先调用close主动关闭连接，这时TCP发送一个FIN M；

  • 另一端接收到FIN M之后，执行被动关闭，对这个FIN进行确认。它的接收也作为文件结束符传递给应用进程，因为FIN的接收意味着应用进程在相应的连接上再也接收不到额外数据；

  • 一段时间之后，接收到文件结束符的应用进程调用close关闭它的socket。这导致它的TCP也发送一个FIN N；

  • 接收到这个FIN的源发送端TCP对它进行确认。

这样每个方向上都有一个FIN和ACK。

qililong88
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
websocket总结
07-25
websocket总结
springboot中移除tomcat插件的方法
Mr_lambor的博客
10-05 1370
<dependency>    <groupId>org.springframework.boot</groupId>    <artifactId>spring-boot-starter-web</artifactId>    <!-- 从依赖信息里移除 Tomca...
websocket实现服务端消息推送
Lin 的博客
04-07 2531
WebSocket全双工通信与消息推送 B/S结构的软件项目中有时客户端需要实时的获得服务器消息，但默认HTTP协议只支持请求响应模式，这样做可以简化web服务器，减少服务器的负担，加快响应速度，因为服务器不需要与客户端长时间建立一个通信链接，但不容易直接完成实时的消息推送功能，如聊天室、后台信息提示、实时更新数据等功能，但通过polling、Long polling、长链接以及HTML5中定义的...
vue项目访问服务器时：WebSocket connection to ‘wss://XXXX/‘的解决方法
weixin_44934104的博客
05-25 2万+
关于WebSocke的介绍：新手入门：websocket 简单来说，WebSocket 为web应用程序客户端和服务端之间（客户端服务端）提供了一种全双工通信机制，报错是因为发送报文的过程出现问题。 我的报错如下： 程序可以正常运行使用，但一直打印报错太难受了，问了一下同事，也查了一下（百度）。 我的想法：服务器地址通过nginx代理访问，所以要么就解决Nginx通过在客户端和后端服务器之间的通信问题，要么就直接让我的前端不给后端发送信息。 解决方式： 1、修改nginx配置： location /api
解决报错：Websocket connection to‘ws://127.0.0.1:5000/socket.io/?EIO=4&transport=websocket’failed：Error
热门推荐
05-03 11万+
解决Flask使用Websocket功能报错：Websocket connection to‘ws://127.0.0.1:5000/socket.io/?EIO=4&transport=websocket’failed：Error during Websocket handshake：Unexpected response code：400。
WebSocket实现消息推送
gs2436的博客
10-17 6600
大部分的web开发者，开发的业务都是基于Http协议的：前端请求后端接口，携带参数，后端执行业务代码，再返回结果给前端。作者参与开发的项目，有一个报警推送的功能，服务端实时推送报警信息给浏览器端；还有像抖音里面，如果有人关注、回复你的评论时，抖音就会推送相关消息给你了，你就会收到一条消息。有些同学会说了，基于Http协议也能实现啊：前端定时访问后端（每隔3s或者几秒），后端返回消息数据，前端拿到后弹出消息。这种方式太low了，而且每个浏览器都这样，使用系统的人一多，服务器的压力就太大了些。
WebSocket传输视频方法总结.txt
01-20
WebSocket传视频方法总结
WebSocket传视频方法总结
02-01
WebSocket传视频方法总结
基于Spring-boot-websocket的聊天应用开发总结
最新发布
01-06
最近在研究通过spring-boot-websocket开发简单的聊天应用，以下对这几天做一下总结。 关于WebRTC原理我主要是通过《WebRTC音视频实时互动技术原理、实战与源码分析》这本书了解底层的框架和实现思路，电子版资料可以...
websocket -webrtc实现视频通话.rar
09-21
公司要做一个移动端通讯聊天，考虑到是公司内部使用，没有采用第三方收费通讯接口，刚开始尝试过nginx+rtmp，但是视频延迟太高，后来经过查询测试总结，最终使用websocket+webrtc实现，测试延迟最高为0.3s左右，可以...
Nginx Websocket 配置
cr7258的博客
03-25 1550
Websocket 简介 WebSocket 是一种基于 TCP 连接的全双工通信的协议，其工作在应用层，建立连接的时候通过复用 Http 握手通道，完成 Http 协议的切换升级，即切换到 WebSocket 协议，协议切换成功后，将不再需要客户端发起请求，服务端就可以直接主动向客户端发送数据，实现双向通信。 和 Http 相比，WebSocket有以下优点: WebSocket 是双向通信协议，可以双向发送或接受信息。HTTP是单向的，只能由客户端发起请求时，服务器才能响应，服务器不能主动向客户端发送
Vue+WebSocket 实现页面实时刷新长连接
weixin_43550660的博客
11-25 8395
Vue+WebSocket 实现页面实时刷新长连接 知乎链接 最近vue项目要做数据实时刷新，折线图每秒重画一次，数据每0.5秒刷新一次，说白了就是实时刷新，因为数据量较大，用定时器估计页面停留一会就会卡死。。。 与后台人员讨论过后决定使用h5新增的WebSocket来实现数据实时展示 一、WebSocket是HTML5出的东西（协议），也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支...
WebSocket协议深度解析
weixin_45637300的博客
06-08 855
WebSocket协议解析
websocket的基础使用，心跳机制，断线重连
weixin_43239880的博客
05-23 6927
websocket的基础使用，心跳机制，断线重连。传统的http请求只能是由前端向后台发送一个请求，然后后台把结果返回给前端，前端再进行展示。这里就暴露了一个问题，就是通信只能由前端发起，而后台无法主动与前端通信。而websoket的出现就是为了解决这个问题，让前端可以主动联系后台，后台也可以主动联系前台。相信大家都知道websoket的应用场景主要是用于即时通讯，比如QQ、微信即时通讯软件，同时在一些实时监控，需要即时暴露问题的地方也需要用到websoket，比如大屏可视化，需要及时的展现商品的成交数量。
WebSocket的事件触发机制
FreeeLinux's blog
04-14 2万+
WebSocket API是纯事件驱动的。应用程序代码监听WebSocket对象上的事件，以便处理输入数据和连接状态的改变。WebSocket协议也是事件驱动的。客户端应用程序不需要轮询服务器来得到更新的数据。消息和事件将在服务器发送它们的时候异步到达。 WebSocket编程遵循异步编程模式，也就是说，只要WebSocket连接打开，应用程序就简单地监听事件。客户端不需要主动轮询服务器得到
websocket的连接及使用
weixin_59733475的博客
03-03 805
websocket的简单使用
node.js websocket connect的使用
weixin_43712886的博客
02-07 1156
通常我们都使用websocket的createServer接口来创建一个监听服务器，自然网上有很多文章介绍这个用法。但我们接触过需要创建一个连接的场景，比如需要保持一个长连接到另外一个服务去获取数据，这就需要用到websocket的connect接口，如果使用这个接口去连接一个不存在的地址，服务会直接挂掉，原因是没有监听connect的error事件，或者是监听的时机不对。下面代码是我开源框架里面的实现： ToConnect(){ var that = this;
【报错】WebSocket connection to ‘ws://xxx.xxx.x.xxxx:8080/ws‘failed:
z914020826的博客
10-15 1万+
简单来说，WebSocket 为web应用程序客户端和服务端之间（客户端服务端）提供了一种全双工通信机制，报错是因为发送报文的过程出现问题。在Vue项目的config.vue的文件中添加一下配置信息。当我们运行Vue项目时，你可能会遇到一下问题。这样问题也就能解决了，也不会出现报错的问题了。
WebSocket即时通讯协议
limengshi138392的博客
07-02 630
WebSocket即时通讯协议 HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。 在2008年诞生，2011年成为国际标准。 现在基本所有浏览器都已经支持了。 WebSocket是一种在单个TCP连接上进行全双工通信的协议。在WebSocket API中，浏览器和服务器只需要完成一次握手（不是指建立TCP连接的那个三次握手，是指在建立TCP连...
websocket code
09-06
WebSocket的代码是根据具体的情况而定的。在上述示例中，我们可以看到WebSocket连接的打开、消息接收、连接关闭和错误处理的代码。具体的WebSocket代码主要涉及以下几个方面： 1. 创建WebSocket连接： const socket = new WebSocket('ws://localhost:8080'); 这里的URL可以根据实际情况进行修改，确保与要连接的WebSocket服务器的地址和端口匹配。 2. 发送消息： 使用WebSocket连接的send()方法发送消息到服务器。 socket.send('Hello WebSocket!'); 3. 接收消息： 使用WebSocket连接的message事件监听器来接收来自服务器的消息。 socket.addEventListener('message', event => { console.log('接收到消息：', event.data); }); 4. 关闭连接： 使用WebSocket连接的close事件监听器来处理连接关闭的情况。 socket.addEventListener('close', event => { console.log('WebSocket连接已关闭：', event.code, event.reason); }); 5. 错误处理： 使用WebSocket连接的error事件监听器来处理WebSocket发生的错误。 socket.addEventListener('error', error => { console.error('WebSocket发生错误：', error); }); 这些是WebSocket的基本代码示例，可以根据实际需求进行修改和扩展。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [websocket总结和代码介绍](https://blog.csdn.net/weixin_39519297/article/details/130058154)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值