WebSocket原理与具体应用

又双叒叕778

已于 2024-04-26 21:39:08 修改

阅读量842

点赞数 14

文章标签： websocket 网络协议网络

于 2024-04-26 21:37:04 首次发布

本文链接：https://blog.csdn.net/qq_63943166/article/details/138229071

版权

本文详细介绍了WebSocket协议的工作原理，以及与AJAX轮询和HTTP的区别，通过一个简单的客户端和服务器端示例展示了如何使用WebSocket实现实时通信。

摘要由CSDN通过智能技术生成

WebSocket原理与具体应用

什么是WebSocket
WebSocket的原理
对比 AJAX轮询，长轮询和 HTTP
一个简单的例子（实现和自己或别人通信）

什么是WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。浏览器和服务器一次握手，持久连接，并进行双向数据传输。

WebSocket的原理

WebSocket的工作原理基于HTTP协议的升级机制，通过握手过程建立起全双工的通信连接。
当客户端发起WebSocket连接请求时，服务器会进行握手响应，验证请求头信息的正确性，并生成Key和Accept等字段。一旦握手成功，客户端和服务器之间就可以通过该连接进行双向通信，直接发送原始数据帧，无需进行额外的HTTP请求。
菜鸟教程

对比 AJAX轮询，长轮询和 HTTP

AJAX 轮询

AJAX 轮询是浏览器每隔一段时间对服务器发出HTTP请求，无论服务器是否有新数据，都会返回响应并关闭连接。

缺点：浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小一部分，会浪费很多的带宽等资源。

长轮询

长轮询是对AJAX轮询的一种改进，客户端向服务器发送一个请求后，服务器会保持这个连接打开，直到有新数据可用或超过预设的等待时间。如果服务器在这段时间内有新数据，它会立即返回响应给客户端。

缺点：如果同时存在的长连接数量过多，可能对服务器造成压力。

HTTP

HTTP是浏览器向服务器发出请求。

缺点：服务器只知道本次发请求的是谁，不知道下一次的发请求的是谁，请求和响应是一次性的，而且不能主动发送数据，只有客户端发请求，服务器才会响应，同时每次请求和响应就携带有大量的header头，效率低，浪费资源。

一个简单的例子（实现和自己或别人通信）

前提准备：终端安装ws模块

客户端 custom.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
    	//与本地计算机通信
        const ws = new WebSocket('ws://localhost:8080')
        //与其他计算机通信
        //const ws = new WebSocket('ws://服务器地址:端口号')
        ws.onopen = function () {
	        console.log('我们连接成功啦...')
	        ws.send('我爱学习');
        }
        ws.onerror = function () {
        	console.log('连接失败了...')
        }
        ws.onmessage = function (e) {
	        console.log('服务端传来数据啦...' + e.data)
        }
        ws.onclose = function () {
        	console.log('连接关闭了...')
        }

    </script>
</body>
</html>

const ws = new WebSocket(URL)
WebSocket URL的格式通常遵循以下结构：

ws://<服务器地址>:<端口>
或
wss://<服务器地址>:<端口>

如何查看服务器地址？

window+r运行cmd
输入ipconfig

3.ipv4地址即服务器地址

服务器端 server.js


const WebSocket = require('ws');

// 创建WebSocket服务器，监听指定端口
const wss = new WebSocket.Server({ port: 8080 });

// 当有新的WebSocket连接时执行
wss.on('connection', function connection(ws) {
  console.log('New connection');

  // 当收到消息时执行
  ws.on('message', function incoming(message) {
    console.log('Received message:', message);

    // 向客户端发送消息
    ws.send('我是服务器，你好啊!');
  });

  // 当连接关闭时执行
  ws.on('close', function close() {
    console.log('Connection closed');
  });
});