SocketWeb实现小小聊天室

SocketWeb实现小小聊天室

  • 消息推送的常见方式
    • 轮询
    • 长轮询
    • SSE(server-sent event):服务器发送事件
    • WebSocket
      • WebSocket简介
      • WebSocket API
  • 实现小小聊天室
    • 实现流程
    • 消息格式
      • 客户端-->服务端
      • 服务端-->客户端

消息推送的常见方式

轮询

浏览器以指定的时间间隔,向服务器发送HTTP请求,服务器将会实时地返回数据给浏览器。
例如,浏览器端可以定时每秒钟一次给后端发HTTP请求,服务端若有数据会实时返回给浏览器,浏览器通过前端展示出来。假设服务器端没有数据更新,则依然会返回一个空的数据。
在这里插入图片描述
轮询的弊端:

  1. 易造成浏览器端数据更新的延迟
  2. 服务器需要不停地处理浏览器发过来的请求,即使没有数据更新也需要定时发送空数据,给服务器造成较大负担

长轮询

长轮询时浏览器会发出ajax请求(异步的javascript和xml请求),服务器端接收到请求后,会阻塞请求,直到有数据更新或者超时,才会返回。HTTP/1.1采用的长链接就是这种方式。
与轮询的区别就在于:若服务器端无数据更新,轮询会返回空数据,长轮询则会阻塞住,直到超时或数据更新,减少了返回的次数,也减轻了服务器的压力。
在这里插入图片描述

SSE(server-sent event):服务器发送事件

SSE会在服务器和客户端之间打开一个单向通道(服务器向浏览器传输),服务器响应的不再是一次性的数据包,而是text/event-stream类型的数据流信息,当服务器有数据变更时,将数据流式地传输到客户端。
例如浏览器请求下载一个大文件时,就会以流式传输源源不断下载数据到客户端。
在这里插入图片描述
浏览器先发出请求,服务器响应并在二者之间打开一个单向通道,然后服务器开始向浏览器源源不断地传输流式数据,直到连接关闭。

WebSocket

WebSocket简介

WebSocket是一种基于TCP连接上进行全双工通信的协议。
(附HTTP协议工作模式:
http1.0:单工。因为是短连接,客户端发起请求之后,服务端处理完请求并收到客户端的响应后即断开连接
http1.1:半双工。默认开启长连接keep-alive,开启一个连接可发送多个请求
http2.0:全双工,允许服务端主动向客户端发送数据)
在这里插入图片描述
客户端先发送HTTP请求,请求中包含一个upgrade:websocket字段,即请求将HTTP协议升级为websocket协议,服务端响应头状态为101,表示同意将HTTP协议升级成websocket协议。

切换为websocket协议后,就可以实现全双工通信了。服务器可以主动发数据给客户端,二者之间也可以同时互相发送消息。

WebSocket API

客户端API
现在HTML5已经支持websocket协议。

  1. 创建websocket对象:let ws = new WebSocket(URL);
  2. websocket对象相关事件:
    open 连接建立时触发:ws.open
    message 客户端接收到服务器发送的数据时触发 ws.onmessage
    close 连接关闭时触发 ws.onclose
  3. websocket对象提供的方法
    send()方法:通过websocket对象调用send()方法发送数据给服务端,参数即为要发送的数据
<script>let ws = new WebSocket("ws://localhost/chat");ws.open = function(){};es.onmessage = function(evt){//通过evt.data可以获取服务器发送的数据};ws.onclose = function(){};
</script>

服务端API
Tomcat从7.0.5开始支持WebSocket,并实现了Java WebSocket规范。
Java WebSocket应用由一系列的Endpoint组成。Endpoint是一个Java对象,代表了WebSocket链接的一端。
(例如,某用户用浏览器和服务端建立了websocket连接之后,服务器就会为该用户创建一个自己的Endpoint。即服务端会有和每个客户端一一对应的Endpoint)
所以,对于服务端来说,Endpoint可以视为是处理客户端具体websocket消息的一个接口,专门和某一个浏览器建立一对一的关系,处理其发送的消息,并返回消息等。

Endpoint对象在Websocket握手时创建,并在客户端与服务端链接过程中有效,最后在链接关闭时结束。

通常用注解式方式实现Endpoint,即定义一个POJO,并添加@ServerEndpoint相关注解。
在Endpoint接口中定义了与其生命周期相关的方法,注解式实现如下:

  1. @OnOpen:当开启一个新的会话时调用,该方法是客户端与服务端握手成功后调用的方法
  2. @OnClose:当会话关闭时调用
  3. @OnError:当连接过程异常时调用

了解了Endpoint生命周期,接下来要开始数据传输了!
服务端接收客户端发送的数据:
定义Endpoint时,用@OnMessage注解指定接收消息的方法,收到消息后会自动执行;
服务端推送数据给客户端:
发送消息由RemoteEndpoint完成,其实例由Session维护。
发送消息有同步和异步两种方式:
同步:通过session,getBasicRemote获取同步消息发送的实例,然后调用其sendXxx()方法发送消息
异步:通过session,getAsyncRemote获取异步消息发送实例,然后调用其sendXxx()方法发送消息
(注:如sendText()就是发送文本数据)

@ServerEndpoint("/chat")
@Component
public class ChatEndpoint{@OnOpen//连接建立时被调用public void onOpen(Session session, EndpointConfig config){}@OnMessage//接收客户端发送的数据时被调用public void Message(String message){}@OnClose//连接关闭时调用public void onClose(Session session){}
}

Web浏览器和服务器建立websocket连接之后,OnOpen事件就会触发,onOpen方法就会自动执行。Tomcat会解析这些注解,然后传递onOpen方法中的参数。

实现小小聊天室

实现流程

在这里插入图片描述

  1. ws client:为客户端组件,即浏览器;login页面输入用户名密码登录后,会请求UserController里的方法;登录成功后,浏览器会向服务端发送websocket请求,触发OnOpen事件;在发送消息时,将消息推送到服务器端,触发OnMessage事件;当关闭连接时,触发OnClose事件;
  2. UserController:用于登录请求的接收,校验用户名密码是否正确;用户名不为空即可,密码要求为123;登录成功后跳转到聊天室页面;
  3. @OnOpen:OnOpen事件被触发后,在该方法中要记录session和httpsession,并广播消息;因为登录并建立会话之后,需要通知其他用户我已登录,并把最新的用户列表推送给所有的客户端;
  4. @OnMessage:OnMessage事件被触发后,需要解析消息,并判断收消息的人是谁,最后把消息推送给指定的人;
  5. @OnClose:Onclose事件被触发后,断开与客户端的连接。

消息格式

消息均为Json格式,分为客户端推送给服务端的消息,以及服务端返回客户端的消息。服务端发往客户端的消息又分两种:一种是系统消息,如显示所有好友信息;另一种是推送给用户的消息,即聊天消息。

客户端–>服务端

消息格式:{“toName”:“刘能”, “message”:“你好”}

服务端–>客户端

  1. 系统消息格式:{“system”:true, “fromName”:null, “message”:[“好友1”,“好友2”]}
  2. 推送给某一个用户的消息格式:{“system”:false, “fromName”:刘能, “message”:“你好”}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/703184.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

图书推荐|Windows Server 2022 Active Directory配置实战

十几年磨一剑&#xff0c;畅销书第10次升级 本书简介 《Windows Server 2022 Active Directory配置实战》是微软技术专家最新推出的Windows Server 2022两卷力作中的Active Directory配置实战篇。 《Windows Server 2022 Active Directory配置实战》延续了作者一贯的写作风格…

MATLAB环境下基于洗牌复杂演化的图像分割算法

智能优化算法因其较强的搜索解能力而得到了大量的应用&#xff0c;在这些计算智能算法中&#xff0c;群体智能优化算法因其高效性、有效性以及健壮性等优点而得到了科研人员的青睐。这类算法借鉴生物群体的合作特性&#xff0c;主要解决大规模复杂的分布式问题&#xff0c;研究…

第7.1章:StarRocks性能调优——查询分析

目录 一、查看查询计划 1.1 概述 1.2 查询计划树 1.3 查看查询计划的命令 1.3 查看查询计划 二、查看查询Profile 2.1 启用 Query Profile 2.2 获取 Query Profile 2.3 Query Profile结构与详细指标 2.3.1 Query Profile的结构 2.3.2 Query Profile的合并策略 2.…

WPF Style样式设置

1.本window设置样式 <Window x:Class"WPF_Study.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.microsoft.com/expressi…

CentOS删除除了最近5个JAR程序外的所有指定Java程序

帮我写一个shell脚本,ps -eo pid,lstart,cmd --sort=-start_time | grep "pgz-admin"查到的结果,返回的所有进程PID,第六个之上的,全部kill 当然,你可以创建一个简单的Shell脚本来完成这个任务。以下是一个例子: #!/bin/bash# 获取包含 "pgz-admin"…

JSONVUE

1.JSON学习 1.概念: JSON是把JS对象变成字符串. 2.作用: 多用于网络中数据传输. JavaScript对象 let person{name:"张三",age:18}//将JS对象转换为 JSON数据let person2JSON{"name":"张三","age":18}; 3.JS对象与JSON字符串转换…

Python爬虫-付费代理推荐和使用

付费代理的使用 相对免费代理来说&#xff0c;付费代理的稳定性更高。本节将介绍爬虫付费代理的相关使用过程。 1. 付费代理分类 付费代理分为两类&#xff1a; 一类提供接口获取海量代理&#xff0c;按天或者按量收费&#xff0c;如讯代理。 一类搭建了代理隧道&#xff0…

AR应用的开发流程

增强现实&#xff08;Augmented Reality&#xff0c;AR&#xff09;是一种技术&#xff0c;它将虚拟信息叠加在真实世界中&#xff0c;通过计算机生成的视觉、听觉、触觉等感官反馈&#xff0c;将虚拟元素与现实世界进行交互。这种技术使得用户可以与现实世界中的虚拟对象进行互…

Windows系统搭建Elasticsearch引擎结合内网穿透实现远程连接查询数据

文章目录 系统环境1. Windows 安装Elasticsearch2. 本地访问Elasticsearch3. Windows 安装 Cpolar4. 创建Elasticsearch公网访问地址5. 远程访问Elasticsearch6. 设置固定二级子域名 Elasticsearch是一个基于Lucene库的分布式搜索和分析引擎&#xff0c;它提供了一个分布式、多…

社交媒体变革者:剖析Facebook对在线互动的贡献

随着数字化时代的蓬勃发展&#xff0c;社交媒体已经成为人们日常生活中不可或缺的一部分。在这个领域的发展中&#xff0c;Facebook作为先行者和领导者&#xff0c;对在线互动的演变和发展产生了深远的影响。本文将深入剖析Facebook在社交媒体领域的贡献&#xff0c;以及它对在…

Python爬虫-爬取B站番剧封面

本文是本人最近学习Python爬虫所做的小练习。如有侵权&#xff0c;请联系删除。 页面获取url 代码 import requests import os import re# 创建文件夹 path os.getcwd() /images if not os.path.exists(path):os.mkdir(path)# 当前页数 page 1 # 总页数 total_page 2# 自动…

项目打包提示一堆 ts 类型错误问题解决

问题 vue3 ts 项目在打包的过程中报了一大堆 ts 类型错误提示&#xff0c;如下图所示&#xff1a; 报错&#xff1a;Could not find a declaration file for module … implicitly has an ‘any’ type. 解决方法 查看 package.json 文件&#xff0c;可以看到&#xff0c;默…

Python Pandas将 DataFrame 转换为列表

更多Python学习内容&#xff1a;ipengtao.com 在数据分析和处理过程中&#xff0c;经常会使用到 Pandas 库来处理和操作数据。Pandas 提供了灵活强大的数据结构 DataFrame&#xff0c;它可以存储和处理各种类型的数据&#xff0c;并提供了丰富的方法和函数来进行数据操作。有时…

AtCoder ABC342 A-D题解

华为出的比赛&#xff1f; 好像是全站首个题解哎&#xff01; 比赛链接:ABC342 Problem A: 稍微有点含金量的签到题。 #include <bits/stdc.h> using namespace std; int main(){string S;cin>>S;for(int i0;i<s.size();i){if(count(S.begin(),S.end(),S[i…

随机分布模型

目录 前言 一、离散型随机变量 1.1 0-1分布 1.2 二项分布 1.3 帕斯卡分布 1.4 几何分布 1.5 超几何分布 1.6 泊松分布 二、连续型随机变量 2.1 均匀分布 2.2 指数分布 2.3 高斯分布/正态分布 2.4 分布&#xff08;抽样分布&#xff09; 2.5 t分布&#xff08;抽样…

matlab经验模式分解的R波检测算法

1、内容简介 略 56-可以交流、咨询、答疑 2、内容说明 略 心血管疾病是威胁人类生命的主要疾病之一&#xff0c;而心电信号&#xff08;electrocardiogram, ECG&#xff09; 则是评价心脏功能的主要依据&#xff0c;因此&#xff0c;关于心电信号检测处理的研究一直为各方所…

react中修改state中的值无效?

// 初始化state state {personArr:[{name:张三,id:1},{name:李四,id:2},{name:王五,id:3}] }componentDidMount(){const newName 赵六const indexUpdate 1const newArr this.state.personArr.map((item,index)>{if(indexUpdate index){return {...item,name:newName}}e…

Nest.js权限管理系统开发(六)新建模块

本文相关文档&#xff1a;NestJS 中文网 创建模块 nest g命令 我们知道一个模块往往包含controller、module、service等文件&#xff0c;为了方便我们创建这些文件&#xff0c;nest cli提供了一些命令&#xff1a; 生成模块 (nest g mo) 以保持代码井井有条并建立清晰的边界…

适合新手博主站长使用的免费响应式WordPress博客主题JianYue

这款JianYue主题之所以命名为 JianYue&#xff0c;意思就是简单而不简约的。是根据Blogs主题优化而成&#xff0c;剔除了一些不必要的功能及排版&#xff0c;仅保留一种博客布局&#xff0c;让新手站长能够快速手上WordPress。可以说这款主题比较适合新手博主站长使用&#xff…

SpringCloud-Docker原理解析

Spring Cloud和Docker的结合为微服务架构的部署和管理提供了强大的支持。本文深入剖析Spring Cloud与Docker的集成原理&#xff0c;从服务注册与发现、配置管理、负载均衡到容器化部署等方面展开详细解析。探讨Spring Cloud如何利用Docker容器技术实现服务的弹性伸缩&#xff0…