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

zhezhongyun 2025-01-14 19:06 367 浏览

是的，现在实现页面实时聊天主要使用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>

</head>

<body>

<form>

</form>

//创建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框架，实现实时聊天也是非常强大的。

HTML5 WebSocket

上一篇：谈谈websocket跨域
下一篇：利用webSocket实现消息的实时推送

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

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

接口测试遇到500报错?别慌，你的头部可能有点问题

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

关于HTML5被简称做H5，你怎么看?（html5缩写）

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