1. Toy模板网首页
  2. > Toy博客

前端（二十一）——WebSocket：实现实时双向数据传输的Web通信协议

10月前 作者：小猫娃来啦 分类：Toy博客 阅读(63) 违法举报

这篇具有很好参考价值的文章主要介绍了前端（二十一）——WebSocket：实现实时双向数据传输的Web通信协议。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

websocket前端,前端,1024程序员节,javascript,开发语言,前端,网络,网络协议

🤨博主：小猫娃来啦
🤨文章核心：WebSocket：实现实时双向数据传输的Web通信协议

前言

在当今互联网时代，实时通信已成为很多应用的需求。为了满足这种需求，WebSocket协议被设计出来。WebSocket是一种基于TCP议的全双工通信协议，通过WebSocket，Web应用程序可以与服务器建立持久的连接，实现实时双向数据输，提供极低的延迟和高效的数据传输。

WebSocket原理

  • HTTP请求-响应协议

在理解WebSocket原理之前，我们需要了解HTTP请求-响应协议。HTTP是一种无状态的请求-响应协议，客户端通过发送HTTP请求到服务器，服务器接收并处理请求，并返回HTTP响应给客户端。但是，在传统的HTTP协议中，客户端只能发送请求，而服务器只能通过响应来处理客户端的请求。

  • WebSocket协议

WebSocket协议是在HTTP协议的基础上进行扩展的。在建立WebSocket连接时，客户端首先发送一个HTTP请求到服务器，并将Upgrade头部字段设置为"websocket"，表示希望升级到WebSocket协议。服务器接收到这个请求后，如果支持WebSocket协议，会返回一个状态码101 Switching Protocols的HTTP响应，并通过Upgrade头部字段将连接升级为WebSocket连接。

升级完成后，客户端和服务器之间的通信不再遵循HTTP请求-响应模式，而是通过WebSocket协议进行双向的实时通信。客户端和服务器可以直接发送消息给对方，不需要等待对方的请求。

如何使用WebSocket

建立WebSocket连接:

要建立WebSocket连接，需要在客户端和服务器之间进行系列的握手操作。下面是详细的代码教程，示了如何在Web应用程序中建立WebSocket连接。

在户端（JavaScript）：

// 创建WebSocket对象并指定服务器地址
var socket = new WebSocket("ws://example.com/socket");

// 监听连接建立事件
socket.onopen = function() {
  console.log("WebSocket连接已建立");
  // 在连接建立后，可以发送消息到服务器
  socket.send("Hello Server!");
};

// 监听接收到服务器发送的消息
socket.onmessage = function(event) {
  var message = event.data;
  console.log("接收到服务器发送的消息：" + message);
};

// 监听连接关闭事件
socket.onclose = function(event) {
  console.log("WebSocket连接已关闭");
};

// 监听连接错误事件
socket.onerror = function(event) {
  console.error("WebSocket连接错误：" + event};

在服务器端（示例使用Node.js）：

const WebSocket = require("ws");

// 创建WebSocket服务器
const wss = new WebSocket.Server({ port: 8080 });

// 监听连接建立事件
wss.on("connection", function(socket) {
  console.log("WebSocket连接已建立");

  // 监听接收到客户端发送的消息
  socket.on("message", function(message) {
    console.log("接收到户端发送的消息：" + message);

    // 向客户端发送消息
    socket.send("Hello Client!");
  });

  // 监听连接关闭事件
  socket.on("close", function() {
    console.log("WebSocket连接已关闭");
  });
});

在以上代码中，客户端通过创建WebSocket对象，并指定服务器地址"ws://example.com/socket"来建立WebSocket连接。同时，客户端通过监听onopen事件，可以在连接建立后发送消息到服务器。服务器端使用WebSocket.Server类创建WebSocket服务器，并监听"connection事件来处理连接建立后的操作。服务器端通过socket.on(“message”)来监听接收到客户端发送的消息，并通过socket.send()向客户端发送消息。

数据传输:

建立WebSocket连接后，客户端和服务器可以通过WebSocket对象进行双向的实时数据传输。下面是一个示例代码，演示了如何在客户端和服务器之间进行数据传输。

在客户端（JavaScript）：

// 发送消息到服务器
socket.send("Hello Server!");

// 监听接收到服务器发送的消息
socket.onmessage = function(event) {
  var message = event.data;
  console.log("接收到服务器发送的消息：" + message);
};

在服务器端（示例使用Node.js）：

// 向客户端发送消息
socket.send("Hello Client!");

// 监听接收到客户端发送的消息
socket.on("message", function(message) {
  console.log("接收到客户端发送的消息：" + message);
});

在以上代码中，客户端通过调用socket.send()方法将消息发送到服务器，服务器通过socket.send()方法将消息发送到客户端。客户端通过监听socket.onmessage事件来接收服务器发送的消息，服务器通过监听socket.on("message")事件来接收客户端发送的消息。

通过以上代码示例，你可以详细了解如何使用WebSocket建立连接并进行数据传输。请注意，示例代码中使用的服务器地址和端口号需要根据实际情况进行修改。同时，你还可以在具体应用中根据需要使用WebSocket的其他方法和事件来实现更复杂的功能。

WebSocket的真实使用场景

即时通讯:

WebSocket非常适合用于即时通讯应用，因为它能够实现实时双向通信。以下是一个简单的即时聊天应用的代码教程。

在客户端（JavaScript）：

// 创建WebSocket对象并指定服务器地址
var socket = new WebSocket("ws://example.com/socket");

// 监听连接建立事件
socket.onopen = function() {
  console.log("WebSocket连接已建立");
  
  // 监听文本框输入，按下Enter键时发送消息
  var input = document.getElementById("input");
  input.addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
      var message = input.value;
      socket.send(message);
      input.value = "";
    }
  });
};

// 监听接收到服务器发送的消息
socket.onmessage = function(event) {
  var message = event.data;
  console.log("接收到服务器发送的消息：" + message);

  // 将接收到的消息显示在聊天窗口中
  var chatWindow = document.getElementById("chatWindow");
  chatWindow.innerHTML += "<p>" + message + "</p>";
};

// 监听连接关闭事件
socket.onclose = function(event) {
  console.log("WebSocket连接已关闭");
};

// 监听连接错误事件
socket.onerror = function(event) {
  console.error("WebSocket连接错误：" + event};

在服务器端（示例使用Node.js）：

const WebSocket = require("ws");

// 创建WebSocket服务器
const wss = new WebSocket.Server({ port: 8080 });

// 监听连接建立事件
wss.on("connection", function(socket) {
  console.log("WebSocket连接已建立");

  // 监听接收到客户端发送的消息
  socket.on("message", function(message) {
    console.log("接收到客户端发送的消息：" + message);

    // 向所有连接的客户端发送消息
    wss.clients.forEach(function(client) {
      client.send(message);
    });
  });

  // 监听连接关闭事件
  socket.on("close", function() {
    console.log("WebSocket连接已关闭");
  });
});

在上述代码中，客户端通过创建WebSocket对象连接到服务器。输入框中的文本框用于录入要发送的消息，按下Enter键时会将消息发送给服务器。服务器接收到消息后，通过遍历所有连接的客户端，向每个客户端发送消息。

这样，多个客户端就可以实时地进行聊天，并且所有的消息都会实时地在各个客户端之间同步显示。

多人协作:

WebSocket还可用于多人协作应用，让多个用户可以实时地协同编辑文档或画布。以下是一个简单的代码教程。

在客户端（JavaScript）：

// 创建WebSocket对象并指定服务器地址
var socket = new WebSocket("ws://example.com/socket");

// 监听连接建立事件
socket.onopen = function() {
  console.log("WebSocket连接已建立");

  // 监听文本框输入，按下Enter键时发送绘画指令
  var canvas = document.getElementById("canvas");
  canvas.addEventListener("mousedown", function(event) {
    // 绘画指令的数据格式可以自定义，这里使用了简单的示例
    var instruction = {
      type: "draw",
      position: {
        x: event.clientX,
        y: event.clientY
      }
    };
    socket.send(JSON.stringify(instruction));
  });
};

// 监听接收到服务器发送的消息
socket.onmessage = function(event) {
  var message = JSON.parse(event.data);
  console.log("接收到服务器发送的消息：" + message);

  // 根据消息执行相应的操作，示例中处理了绘画指令
  if (message.type === "draw") {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.arc(message.position.x, message.position.y, 5, 0, 2 * Math.PI);
    ctx.fill();
  }
};

// 监听连接关闭事件
socket.onclose = function(event) {
  console.log("WebSocket连接已关闭");
};

// 监听连接错误事件
socket.onerror = function(event) {
  console.error("WebSocket连接错误：" + event};

在服务器端（示例使用Node.js）：

const WebSocket = require("ws");

// 创建WebSocket服务器
const wss = new WebSocket.Server({ port: 8080 });

// 监听连接建立事件
wss.on("connection", function(socket) {
  console.log("WebSocket连接已建立");

  // 监听接收到客户端发送的消息
  socket.on("message", function(message) {
    console.log("接收到客户端发送的消息：" + message);

    // 向所有连接的客户端发送消息
    wss.clients.forEach(function(client) {
      client.send(message);
    });
  });

  // 监听连接关闭事件
  socket.on("close", function() {
    console.log("WebSocket连接已关闭");
  });
});

在上述代码中，客户端通过创建WebSocket对象连接到服务器。当鼠标在画布上按下时，将绘画指令发送给服务器。服务器接收到绘画指令后，将指令广播给所有连接的客户端，并在各个客户端上进行绘画操作。

这样，多个用户就可以实时地协同编辑同一个画布或文档，所有的绘画指令都会即时同步在各个客户端之间。

实时数据更新:

WebSocket还可以用于实时数据更新应用，例如股票交易应用中的实时股票价格更新。以下是一个简单的代码教程。

在客户端（JavaScript）：

// 创建WebSocket对象并指定服务器地址
var socket = new WebSocket("链接");

// 监听连接建立事件
socket.onopen = function() {
  console.log("WebSocket连接已建立");
};

// 监听接收到服务器发送的消息
socket.onmessage = function(event) {
  var message = JSON.parse(event.data);
  console.log("接收到服务器发送的消息：" + message);

  // 对接收到的实时数据进行处理
  var stockPriceElement = document.getElementById("stockPrice");
  stockPriceElement.innerText = message.price;
};

// 监听连接关闭事件
socket.onclose = function(event) {
  console.log("WebSocket连接已关闭");
};

// 监听连接错误事件
socket.onerror = function(event) {
  console.error("WebSocket连接错误：" + event};

在服务器端（示例使用Node.js）：

const WebSocket = require("ws");

// 创建WebSocket服务器
const wss = new WebSocket.Server({ port: 8080 });

// 模拟实时股票价格更新
setInterval(function() {
  var stockPrice = Math.random() * 100;
  
  // 向所有连接的客户端发送实时数据
  wss.clients.forEach(function(client) {
    var data = {
      price: stockPrice
    };
    client.send(JSON.stringify(data));
  });
}, 2000);

// 监听连接建立事件
wss.on("connection", function(socket) {
  console.log("WebSocket连接已建立");
 
  // 初始化发送实时数据
  var stockPrice = Math.random() * 100;
  var data = {
    price: stockPrice
  };
  socket.send(JSON.stringify(data));

  // 监听连接关闭事件
  socket.on("close", function() {
    console.log("WebSocket连接已关闭");
  });
});

在上述代码中，客户端通过创建WebSocket对象连接服务器。服务器使用setInterval函数模拟实时股票价格的更新，并将更新的数据发送给所有连接的客户端。客户端监听接收到服务器发送的消息，并处理接收到的实时数据。

这样，在股票交易应用中，多个用户可以实时地接收和显示股票价格的更新信息。包括打游戏的时候，队友之间互相沟通，打字交流，或者走位，放技能等等，都是即时的。

WebSocket的优势与局限性

  • WebSocket的优势:

  • 双向实时通信：WebSocket提供了双向的实时信能力，客户端和服务器可以通过该协议进行双向数据传输，实时反馈更新信息，实现即时通讯、实时数据推送等功能。

  • 较低的延迟：与传统的HTTP请求相比，WebSocket降低了通信的开销，减少了传输和处理数据的延迟，因此可以更快进行实时数据传输。

  • 更高的性能：由于WebSocket使用较少的头部信息和更有效的消息传输格式，因此在相同带宽下可以传输更多的数据，提高了性能和效率。

  • 广泛的浏览器支持：WebSocket是HTML5的一部分，并且得到了大多数现代浏览器的支持，因此它可以在各种平台和设备上使用。

  • 连接保持：与传统的HTTP请求不同，WebSocket连接保持在建立之后，双方可以随时进行数据传输，避免了不必要的连接和断开操作。

  • WebSocket的局限性:

  • 兼容性问题：虽然现代浏览器广泛支持WebSocket，但在某些旧版本或特定设备上可能存在兼容性问题。为了兼容性，可以使用轮训技术（如长轮询）作为备选方案。

  • 部署和维护复杂性：WebSocket服务器的设置和配置可能比传统的Web服务器复杂一些，需要专门的服务器环境和配置。

  • 安全性问题：由于WebSocket是在HTTP协议的基础上建立的，它们共享相同的安全风险，例如跨站点脚本（XSS）和跨站请求伪造（CSRF）。因此，在使用WebSocket时需要考虑到安全性，并采取适当的安全措施。

  • 扩展问题：WebSocket协议还不支持像HTTP/2那样的一些高级特性，例如头部压缩和流量控制。在某些特殊情况下，可能需要通过其他方式实现这些功能。

尽管WebSocket具有上述局限性，但它仍然是实时通讯、实时数据传输和实时协作等场景下的首选协议，因为它具备了双向实时通信和较低延迟等一系列的优势。在开发时，需要根据具体需求和限制，综合考虑使用WebSocket的适用性。

结论

WebSocket是一种能够提供双向实时通信的协议，适用于需要实时数据传输和双向通信的场景。它具有较低的延迟、更高的性和广泛的浏览器持等优势，能够实现即时通讯、多人协和实时数据更新等功能。

然而，WebSocket也存在兼容性、部署和维护复杂性、安全性问题以及缺乏一些高级特性等局限性。在开发时，需要仔细考虑具体需求和限制，并必要时采取适当的解决方案。

总的来说，WebSocket在实时通信和实时数据传输方面具有明显的优势，是构建现代Web应用的重要工具之一。

websocket前端,前端,1024程序员节,javascript,开发语言,前端,网络,网络协议文章来源地址https://www.toymoban.com/news/detail-761077.html

到了这里，关于前端（二十一）——WebSocket：实现实时双向数据传输的Web通信协议的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • WebSocket实现后端数据变化，通知前端实时更新数据

    背景 ​ 项目中需要做一个消息提示功能，当有用户处理相关待办信息后，别的用户需要实时更新处理后的待办信息。 解决方案： ​ 1、使用最原始的方法，写个定时器去查询待办信息。但这种方式在大多数情况是不被允许的，它会浪费系统中的许多资源，同时也并不是完全

    2024年04月15日
    浏览(48)

  • WebSocket vs SSE: 实时数据推送到前端的选择与实现(详细)

    在现代 Web 应用程序中，实时数据推送给前端变得越来越重要。无论是实时聊天、实时通知还是仪表板上的实时更新，都需要一种有效的方式来将数据推送给前端。本文将介绍两种常用的实现方法：WebSocket 和 Server-Sent Events（SSE），并提供详细的实现步骤。 WebSocket 和 Server-S

    2024年02月05日
    浏览(42)
  • AI对话交互场景使用WebSocket建立H5客户端和服务端的信息实时双向通信

    AI对话交互场景使用WebSocket建立H5客户端和服务端的信息实时双向通信

    WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许 服务端主动向客户端推送数据 。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输。 初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HT

    2024年02月03日
    浏览(52)
  • 【WebSocket】前端使用WebSocket实时通信

    【WebSocket】前端使用WebSocket实时通信

    最近写项目，需要实现消息通知和实时聊天的功能，就去了解了一些关于websocket的知识，总结如下。 WebSocket 是一种在 Web 应用中实现实时通信的协议。与传统的 HTTP 请求不同，WebSocket 连接在客户端和服务器之间建立一个 持久性 的 双向通信管道 ，使得数据可以在连接打开后

    2024年02月11日
    浏览(33)
  • 前端（二十四）——轮询与 WebSocket的battle

    前端（二十四）——轮询与 WebSocket的battle

    😃博主：小猫娃来啦 😃文章核心： 轮询与 WebSocket的battle 在现代Web应用中，实时通信已经成为用户体验的重要组成部分。实时通信指的是通过网站或应用程序实时传输数据并保持连接，在无需手动刷新页面的情况下更新内容。轮询和WebSocket都是用于现实时通信的技术。今天

    2024年02月04日
    浏览(48)

  • Java-WebSocket通信 实现根据查询条件主动实时回传数据给前端&List＜Map＜String, Object＞＞转JSON编码器&WebSocket无法注册Bean问题解决方案

    项目背景：Java环境，Get请求根据前端查询条件建立WebSocket连接，每5秒主动实时推送最新查询结果给前端展示。其中也遇到定时器、WebSocket无法注册Bean、No encoder specified for object of class [class java.util.xxx]等问题，相关解决方案也有列举～ Web Sockets 的是在一个单独的持久连接上提

    2024年02月04日
    浏览(50)
  • 基于netty框架不使用SSL证书，实现websocket数据加密传输

    基于netty框架不使用SSL证书，实现websocket数据加密传输

    1、简介 2、实现方式 3、服务端主要代码 4、客户端主要代码 5、调用方式 为什么不使用SSL证书？ 1、服务器运行在专网环境，不能访问互联网。证书有有效期，CA机构规定，证书有效期最多2年。在客户的专网环境里更新和维护证书就会增加运营成本。 实现逻辑？ 参照SSL的实

    2024年02月04日
    浏览(56)
  • websocket实时推送统计数据给前端页面

    websocket实时推送统计数据给前端页面

    前提须知:websocket基本使用 业务场景,每秒推送统计数据给前端页面,分别显示前天,昨天,今天的前十名客户数据 @ServerEndpoint(\\\"/smsMCustomerStaTop10Ws\\\") 定义推送数据给到具体的连接标识 以上 onOpen() 方法最终触发的业务方法 smsMonitorService.pushSmsMCustomerStaTop10(); 以上 smsMonitorMapper.findSm

    2024年02月15日
    浏览(48)
  • kafak消费数据，webSocket实时推送数据到前端

    kafak消费数据，webSocket实时推送数据到前端

    2024年02月11日
    浏览(69)
  • 【多线程面试题二十一】、 分段锁是怎么实现的？

    【多线程面试题二十一】、 分段锁是怎么实现的？

    文章底部有个人公众号： 热爱技术的小郑 。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享？ 踩过的坑没必要让别人在再踩，自己复盘也能加深记忆。利己利人、所谓双赢。 面试官： 分段锁是怎么实现的？ 参考答案： 在并发程序中，串

    2024年02月06日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包