10분 만에 웹소켓에 대해 빠르게 알아보세요! !

WebSocket이란

Definition

Websocket은 요청 및 요청 없이 단일 TCP 연결에서 전이중 통신을 수행할 수 있는 영구 네트워크 통신 프로토콜입니다. code>응답은 완전히 동일한 상태를 갖습니다. 일단 연결이 이루어지면 클라이언트와 서버 간에 실시간으로 양방향 데이터 전송이 가능합니다全双工通讯，没有了Request和Response的概念，两者地位完全平等，连接一旦建立，客户端和服务端之间实时可以进行双向数据传输

关联和区别

• HTTP

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

• socket

1. socket也被称为套接字，与HTTP和WebSocket不一样，socket不是协议，它是在程序层面上对传输层协议（可以主要理解为TCP/IP）的接口封装。可以理解为一个能够提供端对端的通信的调用接口（API）
2. 对于程序员而言，其需要在 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

연관성과 차이점

• HTTP

1. HTTP는 비영구적인 프로토콜입니다. 클라이언트는 Ajax를 지속적으로 사용해야만 서버의 처리 진행 상황을 알고 싶어합니다. > long poll을 폴링하거나 사용하지만, 전자는 서버에 많은 부담을 주고, 후자는 응답 대기로 인해 차단이 발생합니다
2. http1.1에는 연결 유지가 있지만 기본적으로 활성화됨 연결은 이 TCP 채널을 유지하므로 HTTP 연결에서 여러 요청을 보내고 여러 응답을 받을 수 있지만 요청에는 하나의 응답만 있을 수 있습니다. 더욱이 이 반응 역시 수동적이어서 적극적으로 시작할 수 없습니다.
3. websocket은 HTTP와 독립적인 프로토콜이지만 websocket은 핸드셰이크를 수행하기 위해 HTTP 프로토콜에 의존해야 합니다(핸드셰이크 단계에서도 동일). 데이터가 TCP 채널에서 직접 전송되는 것은 HTTP와 아무 관련이 없습니다. 그림을 사용하여 둘 사이의 교차점을 이해할 수 있지만 전부는 아닙니다.

• 소켓 li>

1. 소켓은 소켓이라고도 합니다. HTTP 및 WebSocket과 달리 소켓은 전송 계층 프로토콜의 프로그램 수준 구현이 아닙니다. 주로 TCP/IP의 인터페이스 캡슐화로 이해될 수 있습니다. 엔드 투 엔드 통신을 제공할 수 있는 호출 인터페이스(API)로 이해될 수 있습니다.
2. 프로그래머의 경우 A 측에 소켓 인스턴스를 생성하고 이 인스턴스를 B 측에 제공해야 합니다. 연결하려는 IP 주소와 포트 번호를 입력하고 B 측에 다른 소켓 인스턴스를 생성하고 수신 대기할 로컬 포트 ​​번호를 바인딩합니다. A와 B가 연결을 설정하면 두 당사자는 종단 간 TCP 연결을 설정하여 양방향 통신을 허용합니다. WebSocket은 소켓 아이디어를 활용하고 클라이언트와 서버 간의 유사한 양방향 통신 메커니즘을 제공합니다.

애플리케이션 시나리오

WebSocket은 사격, 메시지 구독, 멀티 플레이어에 사용할 수 있습니다. 게임, 공동 편집, 주식 실시간 펀드 시세, 화상회의, 온라인 교육, 채팅방 및 기타 애플리케이션 실시간 서버 변경 모니터링

Websocket handshake

• Websocket handshake 요청 메시지:

npm install express ws

다음은 기존 메시지와 동일합니다. HTTP 메시지의 차이점:

//引入express 和 ws
const express = require('express');
const SocketServer = require('ws').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('connection', (ws) => {
  //连接时执行此 console 提示
  console.log('Client connected');
  // 对message设置监听，接收从客户端发送的消息
  ws.on('message', (data) => {
    //data为客户端发送的消息，将消息原封不动返回回去
    ws.send(data);
  });
  // 当WebSocket的连接关闭时执行
  ws.on('close', () => {
    console.log('Close connected');
  });
});

은 WebSocket 프로토콜이 시작되었음을 나타냅니다.

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

Sec-WebSocket-Key는 에 의해 무작위로 생성됩니다. 악의적이거나 의도하지 않은 연결을 방지하기 위해 Websocket 통신이 수행될 수 있는지 여부를 확인하는 브라우저입니다. 🎜🎜Sec_WebSocket-Protocol은 서비스에 필요한 프로토콜을 식별하는 데 사용되는 사용자 정의 문자열입니다. 🎜🎜Sec-WebSocket-Version은 지원되는 WebSocket 버전을 나타냅니다. 🎜

• 서버 응답:

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

🎜101 응답 코드는 프로토콜이 변환됨을 나타냅니다. 🎜🎜연결: 업그레이드 새 프로토콜을 업그레이드하라는 요청을 나타냅니다. 🎜🎜업그레이드: websocket은 WebSocket 프로토콜로 업그레이드하는 것을 의미합니다. 🎜🎜Sec-WebSocket-Accept는 서버에서 확인되고 암호화된 Sec-WebSocket-Key입니다. 클라이언트와 서버 간에 통신이 이루어질 수 있음을 증명하는 데 사용됩니다. 🎜🎜Sec-WebSocket-Protocol은 사용된 최종 프로토콜을 나타냅니다. 🎜🎜이 시점에서 클라이언트와 서버는 핸드셰이크를 통해 Websocket 연결을 성공적으로 설정했으며 HTTP는 모든 작업을 완료했으며 다음 단계는 Websocket 프로토콜에 따라 완전히 통신하는 것입니다. 🎜🎜Websocket 정보🎜🎜WebSocket heartbeat🎜🎜알 수 없는 상황으로 인해 SOCKET의 연결이 끊어질 수 있지만 클라이언트와 서버는 이를 알지 못합니다. 클라이언트는 정기적으로 Heartbeat Ping을 보내야 합니다. 서버에 온라인 상태임을 알리고 서버는 Heartbeat Pong으로 응답하여 클라이언트에게 사용 가능함을 알려야 합니다. 그렇지 않으면 연결이 끊어진 것으로 간주됩니다🎜🎜WebSocket 상태🎜🎜readyState WebSocket 객체의 속성에는 네 가지 상태가 있습니다.🎜

• 0: 연결이 이루어지고 있음을 나타냅니다.
• 1: 연결이 성공하고 통신이 가능함을 나타냅니다.
• 2: 연결이 닫히는 중임을 나타냅니다.
• 3: 연결이 완료되었음을 나타냅니다. 연결을 닫거나 열지 못했습니다.

🎜WebSocket practice🎜🎜서버가 수신하고 메시지를 보냅니다🎜🎜WebSocket의 서버 부분, 이 기사는 Node.js로 작성됩니다🎜🎜 express 및 WebSocket 프로토콜 처리를 담당하는 ws 설치: 🎜

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

🎜package 성공적인 설치 후 .json:🎜🎜그런 다음 루트 디렉터리에 server.js 파일을 생성합니다:🎜

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

🎜 node server.js를 실행하여 서비스 시작, 포트 열면 청취 시간 인쇄 프롬프트가 실행되어 서비스를 나타냅니다. 성공적으로 시작되었습니다🎜🎜WebSocket을 연 후 서버는 메시지를 수신하고 매개변수 데이터를 수신하여 클라이언트가 보낸 메시지를 캡처한 다음 보내기를 사용하여 메시지를 보냅니다.🎜🎜클라이언트가 메시지를 수신하고 보냅니다. 🎜🎜만들기 index.html 및 index.js 파일은 각각 루트 디렉터리에 있습니다🎜

• index.html

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

• index.js

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

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

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

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

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

服务端定时发送

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

server.js修改如下:

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

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

多人聊天

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

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

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

修改server.js如下:

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

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

总结 

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

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

위 내용은 10분 만에 웹소켓에 대해 빠르게 알아보세요! !의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!