十分钟快速了解websocket！！-前端问答-PHP中文网

HTTP是非持久的协议，客户端想知道服务端的处理进度只能通过不停地使用 Ajax进行轮询或者采用 long poll 的方式来，但是前者对服务器压力大，后者则会因为一直等待Response造成阻塞
虽然http1.1默认开启了keep-alive长连接保持了这个TCP通道使得在一个HTTP连接中，可以发送多个Request，接收多个Response，但是一个request只能有一个response。而且这个response也是被动的，不能主动发起。
websocket虽然是独立于HTTP的一种协议，但是websocket必须依赖 HTTP 协议进行一次握手(在握手阶段是一样的)，握手成功后，数据就直接从 TCP通道传输，与 HTTP 无关了，可以用一张图理解两者有交集，但是并不是全部。

socket

socket也被称为套接字，与HTTP和WebSocket不一样，socket不是协议，它是在程序层面上对传输层协议（可以主要理解为TCP/IP）的接口封装。可以理解为一个能够提供端对端的通信的调用接口（API）
对于程序员而言，其需要在 A 端创建一个 socket 实例，并为这个实例提供其所要连接的 B 端的 IP 地址和端口号，而在 B 端创建另一个 socket 实例，并且绑定本地端口号来进行监听。当 A 和 B 建立连接后，双方就建立了一个端对端的 TCP 连接，从而可以进行双向通信。WebSocekt借鉴了 socket 的思想，为 client 和 server 之间提供了类似的双向通信机制

应用场景

WebSocket可以做弹幕、消息订阅、多玩家游戏、协同编辑、股票基金实时报价、视频会议、在线教育、聊天室等应用实时监听服务端变化

Websocket握手

Websocket握手请求报文：

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: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

登录后复制

Sec-WebSocket-Key 是由浏览器随机生成的，验证是否可以进行Websocket通信，防止恶意或者无意的连接。

Sec_WebSocket-Protocol 是用户自定义的字符串，用来标识服务所需要的协议

Sec-WebSocket-Version 表示支持的 WebSocket 版本。

服务器响应：

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

登录后复制

101 响应码 表示要转换协议。

Connection: Upgrade 表示升级新协议请求。

Upgrade: websocket 表示升级为 WebSocket 协议。

Sec-WebSocket-Accept 是经过服务器确认，并且加密过后的 Sec-WebSocket-Key。用来证明客户端和服务器之间能进行通信了。

Sec-WebSocket-Protocol 表示最终使用的协议。

至此，客户端和服务器握手成功建立了Websocket连接，HTTP已经完成它所有工作了，接下来就是完全按照Websocket协议进行通信了。

关于Websocket

WebSocket心跳

可能会有一些未知情况导致SOCKET断开，而客户端和服务端却不知道，需要客户端定时发送一个心跳 Ping 让服务端知道自己在线，而服务端也要回复一个心跳 Pong告诉客户端自己可用，否则视为断开

WebSocket状态

WebSocket 对象中的readyState属性有四种状态：

0: 表示正在连接
1: 表示连接成功，可以通信了
2: 表示连接正在关闭
3: 表示连接已经关闭，或者打开连接失败

WebSocket实践

服务端接收发送消息

WebSocket的服务端部分，本文会以Node.js搭建

安装express和负责处理WebSocket协议的ws：

npm install express ws

登录后复制

安装成功后的package.json:

接着在根目录创建server.js文件:

//引入express 和 ws
const express = require(&#39;express&#39;);
const SocketServer = require(&#39;ws&#39;).Server;
//指定开启的端口号
const PORT = 3000;
// 创建express，绑定监听3000端口，且设定开启后在consol中提示
const server = express().listen(PORT, () => console.log(`Listening on ${PORT}`));
// 将express交给SocketServer开启WebSocket的服务
const wss = new SocketServer({ server });
//当 WebSocket 从外部连接时执行
wss.on(&#39;connection&#39;, (ws) => {
  //连接时执行此 console 提示
  console.log(&#39;Client connected&#39;);
  // 对message设置监听，接收从客户端发送的消息
  ws.on(&#39;message&#39;, (data) => {
    //data为客户端发送的消息，将消息原封不动返回回去
    ws.send(data);
  });
  // 当WebSocket的连接关闭时执行
  ws.on(&#39;close&#39;, () => {
    console.log(&#39;Close connected&#39;);
  });
});

登录后复制

执行node server.js启动服务，端口打开后会执行监听时间打印提示，说明服务启动成功

在开启WebSocket后，服务端会在message中监听，接收参数data捕获客户端发送的消息，然后使用send发送消息

客户端接收发送消息

分别在根目录创建index.html和index.js文件

index.html

<html>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

登录后复制

index.js

// 使用WebSocket的地址向服务端开启连接
let ws = new WebSocket(&#39;ws://localhost:3000&#39;);
// 开启后的动作，指定在连接后执行的事件
ws.onopen = () => {
  console.log(&#39;open connection&#39;);
};
// 接收服务端发送的消息
ws.onmessage = (event) => {
  console.log(event);
};
// 指定在关闭后执行的事件
ws.onclose = () => {
  console.log(&#39;close connection&#39;);
};

登录后复制

上面的url就是本机node开启的服务地址，分别指定连接（onopen），关闭（onclose）和消息接收（onmessage）的执行事件，访问html，打印ws信息

打印了open connection说明连接成功，客户端会使用onmessage处理接收

其中event参数包含这次沟通的详细信息，从服务端回传的消息会在event的data属性中。

手动在控制台调用send发送消息，打印event回传信息:

服务端定时发送

上面是从客户端发送消息，服务端回传。我们也可以通过setInterval让服务端在固定时间发送消息给客户端:

server.js修改如下:

//当WebSocket从外部连接时执行
wss.on(&#39;connection&#39;, (ws) => {
  //连接时执行此 console 提示
  console.log(&#39;Client connected&#39;);
+  //固定发送最新消息给客户端
+  const sendNowTime = setInterval(() => {
+    ws.send(String(new Date()));
+  }, 1000);
-  //对message设置监听，接收从客户端发送的消息
-  ws.on(&#39;message&#39;, (data) => {
-    //data为客户端发送的消息，将消息原封不动返回回去
-    ws.send(data);
-  });
  //当 WebSocket的连接关闭时执行
  ws.on(&#39;close&#39;, () => {
    console.log(&#39;Close connected&#39;);
  });
});

登录后复制

客户端连接后就会定时接收，直至我们关闭websocket服务

多人聊天

如果多个客户端连接按照上面的方式只会返回各自发送的消息，先注释服务端定时发送，开启两个窗口模拟：

如果我们要让客户端间消息共享，也同时接收到服务端回传的消息呢？

我们可以使用clients找出当前所有连接中的客户端，并通过回传消息发送到每一个客户端中：

修改server.js如下:

...
//当WebSocket从外部连接时执行
wss.on(&#39;connection&#39;, (ws) => {
  //连接时执行此 console 提示
  console.log(&#39;Client connected&#39;);
-  //固定发送最新消息给客户端
-  const sendNowTime = setInterval(() => {
-    ws.send(String(new Date()));
- }, 1000);
+  //对message设置监听，接收从客户端发送的消息
+   ws.on(&#39;message&#39;, (data) => {
+    //取得所有连接中的 客户端
+    let clients = wss.clients;
+    //循环，发送消息至每个客户端
+    clients.forEach((client) => {
+      client.send(data);
+    });
+   });
  //当WebSocket的连接关闭时执行
  ws.on(&#39;close&#39;, () => {
    console.log(&#39;Close connected&#39;);
  });
});

登录后复制

这样一来，不论在哪个客户端发送消息，服务端都能将消息回传到每个客户端：可以观察下连接信息:

总结

纸上得来终觉浅，绝知此事要躬行，希望大家可以把理论配合上面的实例进行消化，搭好服务端也可以直接使用测试工具好好玩耍一波

更多编程相关知识，请访问：编程教学！！

以上是十分钟快速了解websocket！！的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

Java教程

1663

CakePHP 教程

1420

Laravel 教程

1313

PHP教程

1266

C# 教程

1239

显示更多

Related knowledge

SSE 与 WebSocket Apr 17, 2024 pm 02:18 PM

在本文中，我们将比较服务器发送事件（SSE）和 WebSocket，两者都是用于传递数据的可靠方法。我们将在八个方面对它们进行分析，包括通信方向、底层协议、安全、易用性、性能、消息结构、易用性和测试工具。这些方面的比较总结如下：类别服务器发送事件 (SSE)WebSocket通信方向单向双向底层协议HTTPWebSocket 协议安全与 HTTP 相同存在安全漏洞易用性设置简单设置复杂性能消息发送速度快受消息处理和连接管理影响消息结构纯文本文本或二进制易用性广泛可用对 WebSocket 集成有

理解网页重定向的常见应用场景并了解HTTP301状态码 Feb 18, 2024 pm 08:41 PM

掌握HTTP301状态码的含义：网页重定向的常见应用场景随着互联网的迅猛发展，人们对网页交互的要求也越来越高。在网页设计领域，网页重定向是一种常见且重要的技术，通过HTTP301状态码来实现。本文将探讨HTTP301状态码的含义以及在网页重定向中的常见应用场景。HTTP301状态码是指永久重定向（PermanentRedirect）。当服务器接收到客户端发

PHP与Vue：完美搭档的前端开发利器 Mar 16, 2024 pm 12:09 PM

PHP与Vue：完美搭档的前端开发利器在当今互联网高速发展的时代，前端开发变得愈发重要。随着用户对网站和应用的体验要求越来越高，前端开发人员需要使用更加高效和灵活的工具来创建响应式和交互式的界面。PHP和Vue.js作为前端开发领域的两个重要技术，搭配起来可以称得上是完美的利器。本文将探讨PHP和Vue的结合，以及详细的代码示例，帮助读者更好地理解和应用这两

Django是前端还是后端？一探究竟！ Jan 19, 2024 am 08:37 AM

Django是一个Python编写的web应用框架，它强调快速开发和干净方法。尽管Django是一个web框架，但是要回答Django是前端还是后端这个问题，需要深入理解前后端的概念。前端是指用户直接和交互的界面，后端是指服务器端的程序，他们通过HTTP协议进行数据的交互。在前端和后端分离的情况下，前后端程序可以独立开发，分别实现业务逻辑和交互效果，数据的交

Go语言前端技术探秘：前端开发新视野 Mar 28, 2024 pm 01:06 PM

Go语言作为一种快速、高效的编程语言，在后端开发领域广受欢迎。然而，很少有人将Go语言与前端开发联系起来。事实上，使用Go语言进行前端开发不仅可以提高效率，还能为开发者带来全新的视野。本文将探讨使用Go语言进行前端开发的可能性，并提供具体的代码示例，帮助读者更好地了解这一领域。在传统的前端开发中，通常会使用JavaScript、HTML和CSS来构建用户界面

如何使用C++实现HTTP流传输？ May 31, 2024 am 11:06 AM

如何在C++中实现HTTP流传输？使用Boost.Asio和asiohttps客户端库创建SSL流套接字。连接到服务器并发送HTTP请求。接收HTTP响应头并打印它们。接收HTTP响应正文并打印它。

Django：前端和后端开发都能搞定的神奇框架！ Jan 19, 2024 am 08:52 AM

Django：前端和后端开发都能搞定的神奇框架！Django是一个高效、可扩展的Web应用程序框架。它能够支持多种Web开发模式，包括MVC和MTV，可以轻松地开发出高质量的Web应用程序。Django不仅支持后端开发，还能够快速构建出前端的界面，通过模板语言，实现灵活的视图展示。Django把前端开发和后端开发融合成了一种无缝的整合，让开发人员不必专门学习

前端面试官常问的问题 Mar 19, 2024 pm 02:24 PM

在前端开发面试中，常见问题涵盖广泛，包括HTML/CSS基础、JavaScript基础、框架和库、项目经验、算法和数据结构、性能优化、跨域请求、前端工程化、设计模式以及新技术和趋势。面试官的问题旨在评估候选人的技术技能、项目经验以及对行业趋势的理解。因此，应试者应充分准备这些方面，以展现自己的能力和专业知识。

See all articles

十分钟快速了解websocket！！

什么是WebSocket

定义

关联和区别

应用场景

Websocket握手

关于Websocket

WebSocket心跳

WebSocket状态

WebSocket实践

服务端接收发送消息

客户端接收发送消息

服务端定时发送

多人聊天

总结

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题