浅谈WebSocket及如何搭建实时聊天系统

本文涉及的产品
可观测可视化 Grafana 版,10个用户账号 1个月
可观测监控 Prometheus 版,每月50GB免费额度
函数计算FC,每月15万CU 3个月
简介: WebSocket 是一种在客户端和服务器之间提供全双工、双向通信的网络协议。它是基于TCP/IP协议栈的应用层协议,旨在实现浏览器与服务器之间的实时、低延迟且高效的长连接通信

一、浅谈WebSocket

WebSocket 是一种在客户端和服务器之间提供全双工、双向通信的网络协议。它是基于TCP/IP协议栈的应用层协议,旨在实现浏览器与服务器之间的实时、低延迟且高效的长连接通信。
基本概念:

  • 持久连接(Persistent Connection): WebSocket建立连接后会保持活跃状态,允许双方随时发送数据而无需每次请求都重新建立连接。
  • 全双工通信(Full-duplex Communication): 与传统的HTTP协议不同,WebSocket支持同时在客户端和服务器之间进行双向的数据传输,即两者都可以作为数据发起者。

工作原理:

  1. 握手阶段(Handshaking): 建立WebSocket连接之前,首先通过一个特殊的HTTP升级请求来协商协议升级。客户端在请求头中包含Upgrade: websocket字段,服务器响应同意升级后,连接从HTTP切换到WebSocket协议。
  2. 消息传输:一旦握手成功,WebSocket连接便处于开放状态,客户端和服务器可以互相发送帧(frame),其中包括文本或二进制数据。这种机制使得服务器可以主动推送更新,而不需要客户端轮询请求。

特点:

  • 低延迟:由于连接是持续打开的,减少了传统HTTP的请求-响应模式中的延迟和网络开销。
  • 减少带宽消耗:因为只需要一次握手,并且数据传输格式更紧凑,所以相比于频繁轮询或长轮询方式,WebSocket能更有效地使用网络资源。
  • 跨域支持:WebSocket像HTTP一样支持跨域访问,这使得开发者能够构建跨域的实时应用。
  • 事件驱动:客户端可以通过监听特定事件(如“open”、“message”、“close”等)来处理WebSocket连接的状态变化和接收到的数据。

应用场景:
WebSocket广泛应用于实时聊天系统、协同编辑工具、股票报价系统、在线游戏、物联网设备实时通讯等多种需要实时交互和信息推送的场景。
总之,WebSocket通过其独特的设计克服了传统HTTP协议在实现实时性、双向通信方面的局限性,极大地增强了Web应用程序的功能和用户体验。

二、实施聊天系统搭建步骤

1.创建WebSocket连接

客户端通过JavaScript代码创建WebSocket连接,指定服务器的WebSocket地址。

const socket = new WebSocket('ws://localhost:8080/chat');

2.监听连接状态

客户端需要监听WebSocket连接的状态,以便处理连接打开、关闭、错误等事件。

socket.addEventListener('open', function(event) {
   
  console.log('Connection opened');
});

socket.addEventListener('close', function(event) {
   
  console.log('Connection closed');
});

socket.addEventListener('error', function(event) {
   
  console.error('Error occurred:', event);
});

3.发生消息

当用户输入消息并点击发送按钮时,客户端将消息发送给服务器。

const sendMessageButton = document.getElementById('send-button');
sendMessageButton.addEventListener('click', function() {
   
  const messageInput = document.getElementById('message-input');
  const message = messageInput.value;
  socket.send(message);
  messageInput.value = '';
});

4.接收消息

服务器收到消息后,将其广播给所有连接的客户端。客户端监听来自服务器的消息,并将其显示在聊天窗口中。

socket.addEventListener('message', function(event) {
   
  const message = event.data;
  const chatLog = document.getElementById('chat-log');
  const newMessage = document.createElement('div');
  newMessage.textContent = message;
  chatLog.appendChild(newMessage);
});

5.实现服务器端逻辑

服务器端需要处理WebSocket连接的建立、消息的接收和广播等逻辑。可以使用支持WebSocket协议的服务器端技术,如Node.js的ws模块或Java的Jetty等。
以上是构建一个基本的WebSocket实时聊天系统的主要步骤。根据实际需求,还可以添加用户认证、消息加密、历史消息存储等功能。

相关文章
|
5月前
|
监控 前端开发 API
实战指南:使用Python Flask与WebSocket实现高效的前后端分离实时系统
【7月更文挑战第18天】构建实时Web应用,如聊天室,可借助Python的Flask和WebSocket。安装Flask及Flask-SocketIO库,创建Flask应用,处理WebSocket事件。前端模板通过Socket.IO库连接服务器,发送和接收消息。运行应用,实现实时通信。此示例展现了Flask结合WebSocket实现前后端实时交互的能力。
576 3
|
25天前
|
缓存 监控 前端开发
在 Go 语言中实现 WebSocket 实时通信的应用,包括 WebSocket 的简介、Go 语言的优势、基本实现步骤、应用案例、注意事项及性能优化策略,旨在帮助开发者构建高效稳定的实时通信系统
本文深入探讨了在 Go 语言中实现 WebSocket 实时通信的应用,包括 WebSocket 的简介、Go 语言的优势、基本实现步骤、应用案例、注意事项及性能优化策略,旨在帮助开发者构建高效稳定的实时通信系统。
74 1
|
7月前
|
监控 JavaScript API
局域网监控软件的实时通知系统:利用Node.js和WebSocket实现即时消息推送
本文介绍了如何使用Node.js和WebSocket构建局域网监控软件的实时通知系统。实时通知对于网络安全和家庭监控至关重要,能即时发送监控数据变化的通知,提高响应速度。通过Node.js创建WebSocket服务器,当数据变化时,监控软件发送消息至服务器,服务器随即推送给客户端。此外,还展示了如何利用Node.js编写API,自动将监控数据提交到网站,便于用户查看历史记录,从而提升监控体验。
193 3
|
7月前
|
存储 监控 BI
HIS系统是什么?一套前后端分离云HIS系统源码 接口技术RESTful API + WebSocket + WebService
医院管理信息系统(全称为Hospital Information System)即HIS系统。 常规模版包括门诊管理、住院管理、药房管理、药库管理、院长查询、电子处方、物资管理、媒体管理等,为医院管理提供更有力的保障。 HIS系统以财务信息、病人信息和物资信息为主线,通过对信息的收集、存储、传递、统计、分析、综合查询、报表输出和信息共享,及时为医院领导及各部门管理人员提供全面、准确的各种数据。 门诊医生工作站采用下拉式汉化菜单,界面友好,实用性强,设有与门诊挂号收费系统、医技科室信息系统、住院结算信息系统的软件接口。
171 1
|
传感器 监控 测试技术
森林火灾预警系统 毕业设计 websocket+JAVA+Vue+SpringBoot+MySQL
森林火灾预警系统 毕业设计 websocket+JAVA+Vue+SpringBoot+MySQL
182 0
|
网络协议 BI
直播系统源码协议探索篇(二):网络套接字协议WebSocket
直播系统源码网络套接字协议WebSocket搭建参考代码 connected_clients.add(websocket) try: async for message in websocket: await broadcast(message) finally: connected_clients.remove(websocket)
直播系统源码协议探索篇(二):网络套接字协议WebSocket
|
JavaScript 前端开发 Java
SpringBoot+Vue搭建一个WebSocket的实时聊天室
SpringBoot+Vue搭建一个WebSocket的实时聊天室
245 0
|
Linux PHP Windows
BXA
|
监控 网络协议 JavaScript
Spring WebSocket构建实时交互系统
Spring WebSocket是基于WebSocket协议的一个开源框架,它使得开发人员可以更加方便地建立实时通信机制,以推送消息和数据并实时更新通信系统中的状态。Spring WebSocket被广泛应用于社交网站、电子商务、在线游戏等WEB应用程序中,以实现实时通信和即时响应。
BXA
188 0
|
数据可视化 前端开发 数据挖掘
电子信息毕业设计VUE+websocket+Echart+服务器的智能农业管理系统
对于我们的传统农业生产方式,对于农田的参数检测、病虫害预警、远程管控等的实时效果能力达不到,对于现在的农作物而言,我们知道,农作物最重要的生长标准环境就是农地里的光照、温湿度、病虫害等等的因素,但是我们现在的传统生产方式是远远达不到要求的
电子信息毕业设计VUE+websocket+Echart+服务器的智能农业管理系统