现在页面实时聊天都使用Websocket技术实现吗?
moboyou 2025-08-03 15:57 12 浏览
是的,现在实现页面实时聊天主要使用Websocket,在此之前,还有其它的一些技术,比如:AJAX 轮询、Flash XMLSocket等。
其中Ajax轮询就是定时向服务器发起请求,例如1秒钟请求一次看有没有最新的数据,如果有就读取渲染到页面上来。这种方式需要消耗非常多的服务器资源,无法应用于多人聊天的场景,而且还有一定的延迟,这是由于轮询的间隔时间造成的。
另外Flash XMLSocket这种模式也已经废弃了,因为Flash事实上已经退出历史舞台了,手机上不支持。
那就来说说主要的 WebSocket吧。
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 WebSocket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。
websocket的基本语法:
1. 创建实例
var Socket = new WebSocket(url, [ protocal ] )
以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的,指定了可接受的子协议。
2. websocket属性
假定我们使用了以上代码创建了 Socket 对象:
Socket.readyState
只读属性 readyState 表示连接状态,可以是以下值:
0 - 表示连接尚未建立。
1 - 表示连接已建立,可以进行通信。
2 - 表示连接正在进行关闭。
3 - 表示连接已经关闭或者连接不能打开。
3. websocket事件
以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象:
Open Socket.onopen 连接建立时触发
Message Socket.onmessage 客户端接收服务端数据时触发
4. websocket方法
以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象:
Socket.send() 使用连接发送数据
Socket.close() 关闭连接
一个完整的聊天系统是由三个部分组成的:
前端界面(在浏览器中输入网址打开实时聊天系统界面,并使用Websoket连接到服务器)
后端Web服务器(为聊天系统界面提供Web服务器支持,一般使用80端口)
后端Websocket服务器(为Websocket实时信息传递提供长连接支持和数据转发服务)
Websocket只是整个聊天系统的前端部分,简易的代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<p>姓名:<input type="text"/></p>
<p>消息:<textarea></textarea></p>
<p><button type="button" id="sendBtn">发送</button></p>
</form>
<script>
//创建websocket对象
var ws=new Websocket('ws://localhost:8082');
//绑定建立连接事件
ws.onopen=function(){
console.log('连接已建立');
}
//绑定接收消息事件
ws.onmessage=function(data){
console.log('接收到消息', data);
}
//点击发送按钮时发送数据
document.getElementById('sendBtn').onclick=function(){
ws.send('要发送到服务器的数据');
}
</script>
</body>
</html>
WebSocket实现实时聊天的基本用法大致就是这样子的了, 如果要真正实现功能,还需要后端的支持。如果会Node.js那可以使用 nodejs-websocket模块; 如果会PHP程序开发,则可以选择使用 Swoole框架,实现实时聊天也是非常强大的。
相关推荐
- Excel批量生成随机人名_excel批量生成随机数
-
之前的文章讲过怎么用在Excel生成随机银行名字。今天继续给大家分享下怎么在Excel生成随机人名。随机数据工具包书接上回,本文对之前的随机数据生成工具包进行封装调用,生成的结果直接写入到Excel表...
- 一学就会:Excel MOD函数,让数字周期循环变得easy
-
今日推荐:MOD函数。目的:根据当前日期在年内的周数对5个小组取余,再根据余数的值获取对应的值班小组。MOD函数也可以作为获取随机数的一种,只不过这种随机数是有一定规律的。【函数介绍】MOD——返回两...
- 1条公式,自动随机分配座位,你会么?
-
随机座位困局、老办法效率低、新公式能否破局?.上周学校开会说要给教室换排座位,教务处老师愁得头发都快白了。以前都是靠老师自己写名单再划拉划分组,现在新教室三列座位,学生又多,折腾了三天都没摆顺当。听说...
- excel快速制作姓名随机分配表_姓名随机分组
-
快速制作随机分配表。当需要把这一列的姓名进行随机分组应该怎么操作?是不是还在一行一行的去复制粘贴,这样效率是非常慢的。怎么快速的制作一个随机的分组?·首先在第一组输入等于第一个姓名的A2单元格,双击填...
- Excel里实现随机分组案例:导入名单随机分组
-
大家好呀,今天来给大家分享如何快速在Excel里实现随机分组。如下图所示,有15个人,现在要随机分成3组,每组5个人。只要简单两步,就能完成分组。第一步:为每个人设置一个随机数并编序号C列输入公式=R...
- 办公必备的15个Excel技巧,绝对的硬核干货,收藏备用
-
Excel的灵魂在于数据的分析与统计,而分析与统计就离不开函数或公式,今天要给大家分享的15个函数公式,是工作中常用的,可以直接套用。一、从身份证号码中提取出生年月。函数1:Tex...
- Excel如何将某单元格区域数据随机排序
-
如下图是某公司人员名单,现在想要对这些员工进行随机分组。即对单元格区域内数据进行随机排序。选中B2:E10单元格区域点击下图选项(Excel工具箱,百度它即可了解详细的下载安装方法,本文这里就不做具体...
- 一键生成随机口算题,Excel工具妙用
-
小学生每天都要做口算,今天我给大家分享一下如何用excel来自制小学生的口算题。看我这里已经做好了,它的公式是这样,然后往下去拉,想要多少要多少,而且每一道题都是随机的。而且这一个表做好了之后,只要让...
- Excel秒变抽签神器!1分钟搞定随机点名/抽奖
-
还在为年会抽奖、课堂点名、分组任务抓狂?别求人写代码啦!Excel自带隐藏大招1分钟设置,永久使用,按个键就能开抽超简单3步设置(有手就会版)1随机号生成在姓名表旁新建「随机号」列输入=RAND...
- 基础函数20例,案例解读,再不掌握就真的Out了
-
Excel中的函数是Excel的一个重要工具,如果你不及时掌握,对于Excel的应用、工作效率等会受到很大的影响,今天,小编给大家分享20个Excel的基础函数,对大家肯定很有帮助。练习文件在文末领取...
- 怎么利用Excel实现随机取样_excel随机取数据
-
今天跟大家分享一下Excel如何随机抽样1.打开Excel软件2.选中要抽取数据的单元格区域3.点击下图选项(Excel工具箱,百度即可了解详细下载安装信息,本文这里就不做详细解说。)4.点击【统计与...
- 1分钟学会Excel总表更新,分表实时同步,再也不用熬夜了!
-
你是不是还在用筛选→复制→粘贴的老方法拆分Excel数据?每次按类别整理报表都要折腾半小时?别傻了!今天教你用FILTER函数一键搞定,数据更新还能自动同步!第一步:准备工作表新建3个工作表,分...
- excel计算几个数范围,excel怎么计算一个范围的个数
-
excel怎么计算某些范围的数的个数,需要计算0-5,5-10,10-15,……1000的...比如这些数字在A列,从B1至B10求10个范围的数量。在B1输入:=countif(a:a,=10)在B...
- 让Excel随机排序_excel如何设置随机排序
-
随机排序如下图,希望对A列的应聘人员随机安排面试顺序。先将标题复制到右侧的空白单元格内,然后在第一个标题下方输入公式:=SORTBY(A2:B11,RANDARRAY(10),1)RANDARRAY的...
- 对人员进行随机分组,分步骤详细解释,看了就学会了
-
大家好,我是套路EXCEL!如上图,需要将12个人随机分成3组,每组4人。函数公式如下:=ROUNDUP(CHOOSECOLS(SORT(HSTACK(ROW(1:12),RANDARRAY(12...
- 一周热门
- 最近发表
- 标签列表
-
- 外键约束 oracle (36)
- oracle的row number (32)
- 唯一索引 oracle (34)
- oracle in 表变量 (28)
- oracle导出dmp导出 (28)
- 多线程的创建方式 (29)
- 多线程 python (30)
- java多线程并发处理 (32)
- 宏程序代码一览表 (35)
- c++需要学多久 (25)
- css class选择器用法 (25)
- css样式引入 (30)
- css教程文字移动 (33)
- php简单源码 (36)
- php个人中心源码 (25)
- php小说爬取源码 (23)
- 云电脑app源码 (22)
- html画折线图 (24)
- docker好玩的应用 (28)
- linux有没有pe工具 (34)
- mysql数据库源码 (21)
- php开源万能表单系统源码 (21)
- 可以上传视频的网站源码 (25)
- 随机函数如何生成小数点数字 (31)
- 随机函数excel公式总和不变30个数据随机 (33)