百度360必应搜狗淘宝本站头条
分布式事务框架shiro框架框架图cad怎么画框架scrapy框架
当前位置：网站首页 > 技术文章 > 正文

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

ccwgpt 2025-05-15 16:54 3 浏览 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只是整个聊天系统的前端部分，简易的代码如下：

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

相关推荐

netty系列之:使用Jboss Marshalling来序列化java对象

简介在JAVA程序中经常会用到序列化的场景，除了JDK自身提供的Serializable之外，还有一些第三方的产品可以实现对JAVA对象的序列化。其中比较有名的就是Googleprotobuf。当然...

6款可替代dreamweaver的工具

dreamweaver对一个web前端工作者来说，再熟悉不过了，像我07年接触web前端开发就是用的dreamweaver，一直用到现在，身边的朋友有跟我推荐过各种更好用的可替代dreamweaver...

Java—类加载的基本机制和过程

类加载的基本机制和过程运行Java程序，就是执行java这个命令，指定包含main方法的完整类名，以及一个classpath，即类路径。类路径可以有多个，对于直接的class文件，路径是class文件...

什么是双亲委派机制?(转载)

原文章地址：https://www.cnblogs.com/hollischuang/p/14260801.html什么是双亲委派机制首先，我们知道，虚拟机在加载类的过程中需要使用类加载器进行加载，而...

[架构师必看]我在系统设计上犯过的14个错

在上篇《架构师画像》的文章中提到了自己在系统设计上犯过的一些错，觉得还挺有意义的，这篇文章就来回顾下自己近八年来所做的一些系统设计，看看犯的一些比较大的血淋淋的错误（很多都是推倒重来），这八年来主要做...

ONOS架构之子系统介绍

前言：为了方便灵活性，ONOS采取的是一种模块化结构，一方面能灵活地组织各种模块，容易让开发者扩展出新的模块，同时通过隔离令系统的模块各司其职而不会互相干扰。实际上ONOS是由多个子系统组成，本文将对...

基于微信小程序的在线课堂系统设计与实现-计算机毕业设计源码

摘要随着我国经济迅速发展，人们对手机的需求越来越大，各种手机软件也都在被广泛应用，但是对于手机进行数据信息管理，对于手机的各种软件也是备受用户的喜爱，在线课堂微信小程序被用户普遍使用，为方便用户能够...

微信小程序云开发教室预约系统的前后端交互与数据库设计

需求描述：需要申请使用教室时，可点击教室申请查看教室的使用状况及相关设备。确定好需要的教室后，按学期、校区、教学楼、周次、星期、节次、等维度筛选，并备注用途。例如：当我点击该教室申请占用后，该教室状态...

微信小程序开发准备材料以及方式

这里讲述小程序注册类型为企业类型时所需要的资料，首先需要一个新的邮箱号，作为登陆账号，需要管理员或者法人的身份信息、已绑定银行卡的微信号、手机号、营业执照、开户银行信息，或者一些特殊行业所需要的办理的...

webman 事务回滚失效问题记录

大家好,我是yangyang.最近有用到webman这个框架写业务,写代码的过程中,遇到了一个奇葩的问题:基于webman下使用laravel的orm组件事务回滚不生效简单介绍下webmanwebma...

PHP实时通信:Workerman篇

一般做Web开发，用的是HTTP协议进行通信，是一个简单的请求-响应协议。做PHP开发的都很清楚这一点。只能由浏览器发起请求，服务器响应内容。服务器不能主动向浏览器推送消息。多个浏览器之间也不能互相发...

PHP培训课程内容都有哪些?PHP培训哪些内容?

作为一门经久不衰的开发语言，php开发工程师一直是很多年轻人选择学习和就业的职业方向，那么PHP培训课程主要学习哪些内容呢?一、企业级开发专题:深入剖析企业实际开发过程,教授最实用的企业级技术PHP7...

go 和 php 性能如何进行对比?

PHP性能很差吗？每次讲到PHP和其他语言间的性能对比，似乎都会发现这样一个声音：单纯的性能对比没有意义，主要瓶颈首先是数据库，其次是业务代码等等。好像PHP的性能真的不能单独拿出来讨论似的。但其实一...

突然发现php工作变少了

突然发现php工作变少了。好像不大行了，被go取代了魔法涂鸦python和php对比如下:1.python依赖管理需然简单，但依赖本身做的比较宽松，一但版本更新，或修改，就有一堆问题；2.传统py...

php高并发的瓶颈到底在哪

php高并发的瓶颈到底在哪？是同步阻塞？还是nginx+fpm不断创建-销毁进程资源过度消耗？高并发到底是什么问题，是语言问题嘛，为什么说php不适合高并发？求大佬指点从2009年后一直用lnmp，从...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表