• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

http协议和websocket协议

武飞扬头像
啊唯11
帮助1

http协议

HTTP 即超文本传输协议,是一种获取网络资源 (例如图像、HTML 文档) 的应用层协议,它是互联网数据通信的基础,由请求和响应构成。通常,首先客户端会发送 HTTP 请求(在请求报文中会指定资源的 URL),然后用传输层的 TCP 建立连接,最后服务器响应请求做出应答,回传数据报文。

状态码

前后端交互-在HTTP 中,总共有5类状态码,

1.1xx 信息 请求已被接受,正在处理中
2.2xx成功 请求已处理成功。
3.3xx重定向 客户端需要附加操作才能完成请求。
4.4xx 客户端错误 客户端发起的请求服务器无法处理。
5.5xx服务端错误 服务器在处理请求时发生错误或异常

常见的状态码:

  • 200 – 请求成功
  • 301 – 资源(网页等)被永久转移到其它URL
  • 404 – 请求的资源(网页等)不存在
  • 500 – 内部服务器错误

补充:

学新通
学新通
学新通
学新通
学新通
学新通

http的两种请求

GET :获取一个资源,同时参数直接跟在URL后面,url长度受限制2048字节
POST:不仅可以获取资源,还可以提交资源(譬如上传文件),参数放在请求体中,包大小4G

前后端交互-get和 post 请求的区别:
1.应用场景: get 请求是一个幂等的请求,一般 get 请求用于对服务器资源不会产生影响的场景,比如说请求一个网页。Post 请求不是一个幂等的请求,一般用于会对服务器资源产生影响的场景,比如注册用户这一类的操作。
2.是否缓存:因为不同的应用场景,所以浏览器一般会对get 请求缓存,但很少对 post请求缓存。
3.发送的请求报文: get 请求的报文中实体部分为空,post请求的报文中实体部分一般为向服务器发送的数据。
4.安全性: get 请求可以将请求的参数放入 ur 中向服务器发送,这样的做法相对于 post请求来说,不太安全,因为请求的url 会被保留在历史记录中。
5.请求长度 浏览器由于对 url 有一个长度上的限制,所以会影响 get 请求发送数据时的长度6.参数类型:post的参数传递支持更多的数据类型。

其中的三次握手与四次挥手

三次握手:
1、第一次握手:客户端给服务端发一个 SYN 报文,并指明客户端的初始化序列号 ISN(c)。此时客户端处于 SYN_Send 状态。

2、第二次握手:服务器收到客户端的 SYN 报文之后,会以自己的 SYN 报文作为应答,并且也是指定了自己的初始化序列号 ISN(s),同时会把客户端的 ISN 1 作为 ACK 的值,表示自己已经收到了客户端的 SYN,此时服务器处于 SYN_REVD 的状态。

3、第三次握手:客户端收到 SYN 报文之后,会发送一个 ACK 报文,当然,也是一样把服务器的 ISN 1 作为 ACK 的值,表示已经收到了服务端的 SYN 报文,此时客户端处于 establised 状态。

服务器收到 ACK 报文之后,也处于 establised 状态,此时,双方以建立起了链接。

三次握手的作用:
1、确认双方的接受能力、发送能力是否正常;
2、指定自己的初始化序列号,为后面的可靠传送做准备;
3、如果是 https 协议的话,三次握手这个过程,还会进行数字证书的验证以及加密密钥的生成到。

学新通
四次挥手:
1、第一次挥手:客户端发送一个 FIN 报文,报文中会指定一个序列号。此时客户端处于FIN_WAIT1状态。

2、第二次握手:服务端收到 FIN 之后,会发送 ACK 报文,且把客户端的序列号值 1 作为 ACK 报文的序列号值,表明已经收到客户端的报文了,此时服务端处于 CLOSE_WAIT状态。

3、第三次挥手:如果服务端也想断开连接了,和客户端的第一次挥手一样,发给 FIN 报文,且指定一个序列号。此时服务端处于 LAST_ACK 的状态。

4、第四次挥手:客户端收到 FIN 之后,一样发送一个 ACK 报文作为应答,且把服务端的序列号值 1 作为自己 ACK 报文的序列号值,此时客户端处于 TIME_WAIT 状态。需要过一阵子以确保服务端收到自己的 ACK 报文之后才会进入 CLOSED 状态

服务端收到 ACK 报文之后,就处于关闭连接了,处于 CLOSED 状态。

通俗地讲:
1.第一次挥手:双方交流的差不多了,此时客户端也已经结尾了,接下来要断开通信连接,所以告诉服务端"我说完了 (FIN)”,此时自身形成等待结束连接的状态。
2.第二次挥手:服务端知道客户端已经没话说了,服务端此时还有两句心里话要给客户端说,“我知道你说完了 (ACK),我再给你说两句,吧啦吧啦。。
3,第二次挥手:此时客户端洗耳恭听继续外工等待结束的状态,服务器端也说完了,自身此时外干等待关闭连接的状态,并对告诉客户端,“我说完了,咱们断了吧 (FIN)”
4.第四次挥手:客户端收知道服务端也说完了,也要告诉服务端一声(ACK),因为连接和断开要双方都按下关闭操作才能断开,客广端同时又为自己定义一个定时器,因为不知道刚才说的这句话能不能准确到达服务端(网络不稳定或者其他因素引起的网络原因)默认时间定为两个通信的最大时间之和,超出这个时间就默认服务器端已经接收到了自己的确认信息,此时客户端就关闭自身连接服务器端一旦接收到客户端发来的确定通知就立刻关闭服务器端的连接。

学新通

websocket协议

websocket 是 htm15 提供的一种浏览器与服务器进行全双工通讯的网络技术,属于应层协议。它基于TCP 传输协议,并复用 HTTP 的握手通道,浏览器和服务器只需要完成-次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输


Websocket原理:客户端 websocket 服务器通知 (notify) 一个带有所有接收者ID 的事件,服务器接收后立即通知所有活跃的客户端,只有 ID 在接收者D 序列中的客户端才会处理这个事件。

2.Websocket 特点:
A.支持双向通信,实时性更强
B.可以发送文本,也可以发送二进制数据
建立在TCP 协议之上,服务端的实现比较容易c.D数据格式比较轻量,性能开销小,通信高效。
E没有同源限制,客户端可以与任意服务器通信F.协议标识符是 ws(如果加密,则为 wss),服务器网址就是 URL。G.与HTTP 协议有良好的兼容性,默认端口也是 80 和443,并且握手阶段采用 HTTP 协议因此握手时不容易屏蔽,能通过各种HTTP 代理服务器

我们来看一下Websocket发送请求和HTTP发送请求的区别:

学新通

基本使用:

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.  
    <title>Document</title>
  8.  
     
  9.  
    <style>
  10.  
    .container {
  11.  
    width: 600px;
  12.  
    height: 480px;
  13.  
    border: 1px solid #000;
  14.  
    }
  15.  
    </style>
  16.  
    </head>
  17.  
    <body>
  18.  
    <div class="container">
  19.  
     
  20.  
    </div>
  21.  
    <input type="text" id="txt">
  22.  
    <button id="btn1">建立连接</button>
  23.  
    <button id="btn2">发送消息</button>
  24.  
    <button id="btn3">关闭连接</button>
  25.  
     
  26.  
     
  27.  
    <script>
  28.  
    // 找到div
  29.  
    let box = document.querySelector('.container')
  30.  
    // 找到文本框
  31.  
    let txt = document.querySelector('#txt')
  32.  
     
  33.  
    let ws = null
  34.  
     
  35.  
    document.querySelector('#btn1').onclick = function () {
  36.  
     
  37.  
    // 创建websocket对象,并设置连接地址
  38.  
    ws = new WebSocket('ws://zllhyy.cn:4430')
  39.  
    // 监听服务器发的消息,e里面有个属性叫data
  40.  
    // 就有服务器返回的消息
  41.  
    ws.onmessage = function (e) {
  42.  
     
  43.  
    box.innerHTML = `<p>服务器说:${e.data}</p >`
  44.  
    }
  45.  
    }
  46.  
     
  47.  
    document.querySelector('#btn2').onclick = function () {
  48.  
     
  49.  
    // 要给服务器发消息
  50.  
    if (ws) {
  51.  
    box.innerHTML = `<p>我说:${txt.value}</p >`
  52.  
    ws.send(txt.value)
  53.  
    }
  54.  
    }
  55.  
     
  56.  
    document.querySelector('#btn3').onclick = function () {
  57.  
     
  58.  
    ws.close()
  59.  
    }
  60.  
    </script>
  61.  
    </body>
  62.  
    </html>
学新通

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhfikgae
系列文章
更多 icon
同类精品
更多 icon
继续加载