当前位置:首页 > 技术文章 > 正文内容

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

arlanguage1个月前 (04-03)技术文章17

是的,现在实现页面实时聊天主要使用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框架,实现实时聊天也是非常强大的。

扫描二维码推送至手机访问。

版权声明:本文由AR编程网发布,如需转载请注明出处。

本文链接:http://www.arlanguage.com/post/3791.html

标签: php聊天系统
分享给朋友:

“现在页面实时聊天都使用Websocket技术实现吗?” 的相关文章

windows下的nginx安装和使用

.1 去官网下载相应的安装包:http://nginx.org/en/download.html1.2 解压后进入PowerShell(按住“shift”+“鼠标右键”)窗口,进入到nginx目录,输入start nginx.exe 进行nginx的安装安装成功后,在“任务管理器”中会显示“ngin...

nginx启动、重启、关闭

一、启动cd usr/local/nginx/sbin./nginx二、重启更改配置重启nginxkill -HUP 主进程号或进程号文件路径或者使用cd /usr/local/nginx/sbin./nginx -s reload 判断配置文件是否正确nginx -t -c /usr/local/...

Nginx系列:图片过滤处理

http_image_filter_module是Nginx提供的集成图片处理模块,支持nginx-0.7.54以后的版本,在网站访问量不是很高;磁盘有限不想生成多余的图片文件的前提下,就可以用它实时缩放图片,旋转图片,验证图片有效性以及获取图片宽高以及图片类型信息,由于是实时计算的结果,所以网站...

Nginx 的日志 nginx的日志能否保存到日志审计里面?

Nginx 的日志主要有 2 个,一个是 access.log, 一个是 error.log。如果你不进行任何配置的话,这 2 个日志将会使用默认的日志配置,这个日志将会位于/var/log/nginx 目录中。针对虚拟主机的配置如果你使用了 Nginx 为虚拟主机的话。那么你可以在你的虚拟主机的配...

容器中Nginx高并发参数调优实战 nginx并发量过高怎么处理

在容器化的微服务架构中,Nginx作为反向代理和负载均衡器,常常需要承担高并发访问的压力。当并发连接数超过Nginx可处理的上限时,就会出现新连接被丢弃的情况。本文将详细介绍如何发现和定位这个问题,并通过调整内核参数和Nginx配置来解决。一、问题现象某Web服务在高并发场景下,偶尔会出现部分请求无...

网站加载慢?让你的网站腾飞起来,LiteSpeed部署

说起LiteSpeed 还得说起我的小站,<开心洋葱网>,虽然流量不大,但是访问是真的慢,无奈经费有限,那就只能在服务器加速上动起心思来。之前一直听说 QUIC 访问网站的速度会让你感觉飞起来,那就搞下吧。我们先来看下 QUIC 、LiteSpeed都是些做什么的?QUIC(Quick...