你选用哪种技术实现网页版聊天室
随着HTML5 Websockets 的兴起，网页版聊天应用也越来越广泛。最近在做一个手机端的网页应用，核心功能就是在手机端实现网页版的聊天。当然功能很简单，当前只是可以实现发送文本消息和图片消息，界面如下图
要想在网页上实现聊天的功能，在当下来说有两种方式可供选择，其一使用ajax-long polling的方式，其二就是使用html5中的websocket技术
一、 Ajax-long polling
在HTML5还未出现之前，我想实现网页版的聊天的功能大概就是使用这种方式吧！所谓long polling 也无非就是实时的去服务端请求数据，也就是去服务器上拉取数据。这就需要使用js在网页中设定一个计时器setinterval()，每隔一定的时间就去请求一次服务器，如果有新的数据，那么客户端就会将此条数据显示在自己的页面中。整个过程可以用下图来表示
使用此种方式，需要无限的循环请求，直到离开此聊天页面，非常消耗资源，但是在html出现之前这也不失为一种好的方法。
二、 html5 websocket
随着html5的兴起，websocket逐渐的被人们所熟知。使用websocket实现网页版的聊天将取代ajax方式，并且此种方式的聊天的应用越来越广泛。
Websocket协议提供全双工通信，这一点不同于HTTP协议。此外Websocket协议是建立自单一的TCP链接上的，其传输的信息流是基于TCP的。Websocket协议定义了ws或者wss作为URI来加密或者解密链接，例如我们可以使用ws://127.0.0.1地址作为websocket服务的链接地址。当前websocket协议已经被Google,IE,Firefox,Safari和Opera等浏览器所支持。
Websocket聊天的过程如下
此种方式，客户端和服务器端都可以互相推送消息。在没有新消息的时候，大家都在自己端监听着相应的端口，可以认为各浏览器和服务器端都建立了一个数据通道，大家在各自通道口监听着（当然也包括服务端），当某一个浏览器向服务端推送一条消息以后，服务端收到这条消息，然后将这条消息再推送给和其连接的所有的浏览器（其中也包括主动向服务端推送消息的浏览器）。这样的一个过程可以实现网页版的聊天。
当然，现在并不是所有的浏览器都支持websocket协议，因此为了实现更广泛的兼容性，Guillermo Rauch创建了websocket API ——socket.io。
socket.io是一个javascript的函数库，包括两部分：一部分是客户端的类库；另一部分是服务端的类库，使用nodejs实现。这两部分使用几乎相同的API，并且socket.io和nodejs一样，都是事件驱动的机制。
以上就是当下实现网页聊天的两种方式，我们可以根据项目的实际情况选择其中的任意一种方式来实现。当然还是推荐使用websocket方式。本篇仅仅是介绍两种实现网页聊天的方式，不涉及到任何实现代码，在下一篇文章中我会介绍如何使用socket.io搭建一个简单的聊天室。如果大家有什么好的建议，欢迎在下面留言，共同讨论，共同提高
相关文章
Network Interfaces in Linux
发布时间：2025/04/20 浏览次数：131 分类：OPERATING SYSTEM
-
/etc/network/interfaces This article will look at the complete syntax explanation in Debian and its derivatives . The file /etc/network/interfaces allows you to assign static and dynamic IP addresses to interfaces, configure routing informa
AJAX calls in Node.js
发布时间：2025/04/17 浏览次数：103 分类：Node.js
-
Representational State Transfer is abbreviated as REST . An API or Web API (Application Programming Interface) that complies with the restrictions and limitations of the REST architectural style and allows interaction with RESTful web servi
PHP with Ajax
发布时间：2025/04/13 浏览次数：140 分类：PHP
-
We will use PHP and ajax by printing a simple sum of two numbers 2 and . Also, print a php array in JSON. 3 object We will also use PHP with ajax by getting the HTML formatted output from the number division in PHP. Printing simple addition
How to use the Linux file remote copy command scp
发布时间：2025/04/08 浏览次数：151 分类：OPERATING SYSTEM
-
Scp copies files between two hosts over the network, and the data is encrypted during transmission. Its underlying layer uses ssh for data transmission. And it has the same authentication mechanism and the same security level as ssh. When u
Adding network mode in Docker Compose
发布时间：2025/03/25 浏览次数：138 分类：Docker
-
By default, a single network is created by Docker Compose in our application and each container is added there as a service. Every container on the network can be accessed and found by containers on the single network. We can configure our
Using Docker network host commands
发布时间：2025/03/24 浏览次数：51 分类：Docker
-
Docker containers work by leveraging network drivers that are created during the installation of Docker. The default drivers available to us include bridge and host networking. When we create containers without specifying a network, they ar
Mapping a network drive in a batch script
发布时间：2025/03/21 浏览次数：73 分类：OPERATING SYSTEM
-
This article will discuss how to map a network drive in a batch script. Mapping a network drive in a batch script For this purpose, we will see three formats of the same command. However, the general format of the command is: net use P: "\\
What multipart/form-data does in post Upload upload files
发布时间：2025/03/18 浏览次数：64 分类：NETWORK
-
Everyone has used the attribute enctype="multipart/form-data" when uploading files using a form. What is the role of multipart/form-data? Let's talk about this topic. First, let's look at a case Look at the first code form action= "handl
About application/x-www-form-urlencoded
发布时间：2025/03/18 浏览次数：148 分类：NETWORK
-
As a data format of form, application/x-www-form-urlencoded has its own characteristics form action= "handle.php" method= "post" input type= "text" name= " uname" class= " uname" /br / input type= "text" name= "email" class=
