现在页面实时聊天都使用Websocket技术实现吗?
zhezhongyun 2025-01-14 19:06 404 浏览
是的,现在实现页面实时聊天主要使用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框架,实现实时聊天也是非常强大的。
- 上一篇:谈谈websocket跨域
- 下一篇:利用webSocket实现消息的实时推送
相关推荐
- 3D边框效果绝了Jetpack Compose也太会玩了吧
-
在JetpackCompose中创建惊艳的3D边框效果大家好!今天我要分享一个超酷的技巧——如何在JetpackCompose中创建3D边框效果。这种效果可以应用于任何视图和任何形状...
- “雨”你同行,他们在岗位上为您守护……
-
7月10日京津冀地区迎来降雨天气京铁人以“降雨预警”为令迎风而上逆水而行全力守护铁路运输安全雨帘下的“摆渡人”北京站、石家庄站及时铺设防滑垫,检查排水设施,确保旅客行走通道安全。北京北站加密站台巡视...
- 战士实用小福利!巧用宏命令让血条更直观
-
很多战士朋友经常被怒气和血条所困扰,如何及时的进行规避开启防御技能?如何更好的利用怒气打出伤害?成为了众多战士的首要问题。现在即使在没有插件的支持下我们也可以实现这样的功能,巧用宏命令就可以让怒气和血...
- python操作word 添加导航栏,导航栏在左边显示
-
点赞标记,明天就能用上这几个技巧!要实现Python生成Word文档并显示左侧导航栏(即导航窗格),需通过标题样式标记文档结构+修改文档视图设置两步完成。以下是详细且经过验证的解决方案,基于pytho...
- 田渊栋等原班人马作:AI生成长篇故事,数千字长文也能连贯、有趣
-
机器之心报道编辑:小舟、陈萍以后,写故事这脑力活可以交给AI了。前段时间,模仿人类写作过程的语言模型Re^3发布,该模型不需要微调大模型,而是通过设计prompt来生成一致性强的故事。现在...
- VBA常用代码_1、文本格式整理
-
本人财务岗位,非专业编程人员,请勿以专业看待哈,能用无BUG即可!均是我在工作中常用的补充功能,且具有通用性的功能。基于实用性而编写。不见理论,只需要你会复制粘贴就行。看完第一篇文章,结合之后更新的内...
- 行业首选的文档管理工具Aspose.Words新版本v16.3.0发布
-
Aspose.Words是一款先进的文档处理控件,在不使用MicrosoftWords的情况下,它可以使用户在各个应用程序中执行各种文档处理任务,其中包括文档的生成、修改、渲染、打印,文档格式转换和...
- 作为前端工程师必须懂得的33个CSS核心概念
-
你真的懂CSS吗?层叠样式表(CSS)是网页设计的支柱,能将单调的HTML转变为视觉惊艳的交互界面。要精通CSS,必须理解从基础选择器到动画、响应式设计等高级技巧在内的核心概念。无论你是初学者还是资深...
- 全力做好节假日期间服务保障工作
-
为保障五一期间ETC运营工作正常有序开展,甘肃省高速公路ETC管理服务中心全力以赴、恪尽职守,使各项工作有备无患。一是要求中心全体职工牢固树立安全发展观念,时刻紧绷“安全弦”,夯实安全生产基础,落实安...
- Manila's hyping up of illegal 'arbitral award' nothing but a damp squib
-
Manila'shypingupofillegal'arbitralaward'nothingbutadampsquib:ChinaDailyeditorial-Opi...
- QLabel 文字两端对齐解决方案
-
在Qt开发中,实现QLabel文字两端对齐是一个常见需求。本文将介绍多种在Qt中实现QLabel文字两端对齐的方法及其原理。Qt本身具备文字两端对齐的支持,但需要同时使用Qt::AlignJ...
- tkinter中的一些自定义控件,你知道几个呢?
-
用tkinter图形库编写过界面的朋友都知道,tkinter中拥有的图形控件很少,ttk中虽然新增了一些,但是这也不足以满足我们的使用,因为我们在编写图形界面的时候会用到各种各样的控件,有些是tkin...
- 一个人的婚礼:她送给自己的新婚礼物是遗体捐献书
-
style="text-indent:2em;">1月20日,在重庆武隆区医院的病房里,爱心人士为21岁的杨春燕在医院举办了一场没有新郎的婚礼,圆了春燕穿婚纱、走红毯的心愿,仪式后春燕签署了遗体...
- 毕业论文小技巧:word排版之章节自动化编号
-
设置大纲多级列表目的是方便增删章节时实现章节标号的自动编号,并且实现论文图表公式编号按照章节顺序自动编号。准备工作:假设前面已经定义好章节标题样式分别为标题一论文章标题、论文节标题、论文小节标题、论文...
- 伊朗呼吁土耳其立即终止对叙军事行动
-
style="text-indent:2em;">新华社德黑兰1月21日电(记者马骁穆东)伊朗外交部21日发表声明说,希望土耳其立即终止在叙利亚阿夫林发起的军事行动,避免叙北部危机进一步恶化。...
- 一周热门
- 最近发表
-
- 3D边框效果绝了Jetpack Compose也太会玩了吧
- “雨”你同行,他们在岗位上为您守护……
- 战士实用小福利!巧用宏命令让血条更直观
- python操作word 添加导航栏,导航栏在左边显示
- 田渊栋等原班人马作:AI生成长篇故事,数千字长文也能连贯、有趣
- VBA常用代码_1、文本格式整理
- 行业首选的文档管理工具Aspose.Words新版本v16.3.0发布
- 作为前端工程师必须懂得的33个CSS核心概念
- 全力做好节假日期间服务保障工作
- Manila's hyping up of illegal 'arbitral award' nothing but a damp squib
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法:GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- CSS 水平对齐 (Horizontal Align) (30)
- opacity 属性 (32)