html5一对一聊天,实现一个简单的WebSocket聊天室

本文介绍了WebSocket作为HTML5的一种协议,如何实现服务器与客户端的全双工通信,以及为什么传统HTTP协议无法实现类似功能。通过实例展示了使用Express创建服务端,并逐步引入HTML和Socket.io构建一个简单的聊天窗口。最后,通过安装和配置Socket.io,实现了用户连接后的基本功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

WebSocket 简介

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

为什么传统的HTTP协议不能做到WebSocket实现的功能?这是因为HTTP协议是一个请求-响应协议,请求必须先由浏览器发给服务器,服务器才能响应这个请求,再把数据发送给浏览器。换句话说,浏览器不主动请求,服务器是没法主动发数据给浏览器的。

Web

我们先用 express 搭一个基础的服务端。

创建 index.js 文件

var app = require('express')();

var http = require('http').createServer(app);

app.get('/', function(req, res){

res.send('

Hello world

');

});

http.listen(3000, function(){

console.log('listening on *:3000');

});

复制代码

run nod

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值