百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

现在页面实时聊天都使用Websocket技术实现吗?

yuyutoo 2025-03-24 01:14 20 浏览 0 评论

是的,现在实现页面实时聊天主要使用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只是整个聊天系统的前端部分,简易的代码如下:

姓名:

消息:

<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>

WebSocket实现实时聊天的基本用法大致就是这样子的了, 如果要真正实现功能,还需要后端的支持。如果会Node.js那可以使用 nodejs-websocket模块; 如果会PHP程序开发,则可以选择使用 Swoole框架,实现实时聊天也是非常强大的。

相关推荐

《保卫萝卜2》安卓版大更新 壕礼助阵世界杯

《保卫萝卜2:极地冒险》本周不仅迎来了安卓版本的重大更新,同时将于7月4日本周五,带来“保卫萝卜2”安卓版本世界杯主题活动的火热开启,游戏更新与活动两不误。一定有玩家会问,激萌塔防到底进行了哪些更新?...

儿童手工折纸:胡萝卜,和孩子一起边玩边学carrot

1、准备两张正方形纸,一橙一绿,对折出折痕。2、橙色沿其中一条对角线如图折两三角形。3、把上面三角折平,如图。4、绿色纸折成三角形。5、再折成更小的三角形。6、再折三分之一如图。7、打开折纸,压平中间...

《饥荒》食物代码有哪些(饥荒最新版代码总汇食物篇)

饥荒游戏中,玩家们需要获取各种素材与食物,进行生存。玩家们在游戏中,进入游戏后按“~”键调出控制台使用代码,可以直接获得素材。比如胡萝卜的代码是carrot,玉米的代码是corn,南瓜的代码是pump...

Skyscanner:帮你找到最便宜机票 订票不求人

你喜欢旅行吗?在合适的时间、合适的目的地,来一场说走就走的旅行?机票就是关键!Skyscanner这款免费的手机应用,在几秒钟内比较全球600多家航空公司的航班安排、价格和时刻表,帮你节省金钱和时间。...

小猪佩奇第二季50(小猪佩奇第二季英文版免费观看)

Sleepover过夜Itisnighttime.现在是晚上。...

我在民政局工作的那些事儿(二)(我在民政局上班)

时间到了1997年的秋天,经过一年多的学习和实践,我在处理结婚和离婚的事情更加的娴熟,也获得了领导的器重,所以我在处理平时的工作时也能得心应手。这一天我正在离婚处和同事闲聊,因为离婚处几天也遇不到人,...

夏天来了就你还没瘦?教你不节食13天瘦10斤的哥本哈根减肥法……

好看的人都关注江苏气象啦夏天很快就要来了你是否和苏苏一样身上的肉肉还没做好准备?真是一个悲伤的故事……下面这个哥本哈根减肥法苏苏的同事亲测有效不节食不运动不反弹大家快来一起试试看吧~DAY1...

Pursuing global modernization for peaceful development, mutually beneficial cooperation, prosperity for all

AlocalworkeroperatesequipmentintheChina-EgyptTEDASuezEconomicandTradeCooperationZonei...

Centuries-old tea road regains glory as Belt and Road cooperation deepens

FUZHOU/ST.PETERSBURG,Oct.2(Xinhua)--NestledinthepicturesqueWuyiMountainsinsoutheastChi...

15 THE NUTCRACKERS OF NUTCRACKER LODGE (CONTINUED)胡桃夹子小屋里的胡桃夹子(续篇)

...

AI模型部署:Triton Inference Server模型部署框架简介和快速实践

关键词:...

Ftrace function graph简介(flat function)

引言由于android开发的需要与systrace的普及,现在大家在进行性能与功耗分析时候,经常会用到systrace跟pefetto.而systrace就是基于内核的eventtracing来实...

JAVA历史版本(java各版本)

JAVA发展1.1996年1月23日JDK1.0Java虚拟机SunClassicVM,Applet,AWT2.1997年2月19日JDK1.1JAR文件格式,JDBC,JavaBea...

java 进化史1(java的进阶之路)

java从1996年1月第一个版本诞生,到2022年3月最新的java18,已经经历了27年,整整18个大的版本。很久之前有人就说java要被淘汰,但是java活到现在依然坚挺,不知道java还能活...

学习java第二天(java学完后能做什么)

#java知识#...

取消回复欢迎 发表评论: