入门WebSocket和socket.io,实现在线实时聊天室

为什么会有WebSocket协议呢?

因为HTTP有一个缺陷:通信只能由客户端发起。HTTP 协议做不到服务器主动向客户端推送信息。WebSocket协议是双向的,服务器端可以主动向客户端推送信息,客户端也可以主动向服务器发送消息,是真正的双向对话平等,属于服务器推送技术的一种。WebSocket建立在TCP协议上。

HTTP协议是这样通信的:客户端发起请求request,服务器端响应response,一个request对应一个response,而且这个response是被动的,不会主动向客户端发起。所以说,HTTP协议是被动性的,只能由客户端发起,不能主动向客户端推送信息。

这种单向请求的特点,注定了如果服务器端有连续的状态变化,客户端要获知就比较麻烦,需要使用Ajax轮询(让浏览器隔个几秒就发送一次请求,询问服务器是否有新信息。这种方式效率低,非常浪费资源,因为需要不停连接,或者HTTP连接始终打开,既浪费了网络带宽,又浪费了CPU的利用率)或long poll(原理跟Ajax轮询差不多,它采取的是阻塞模式,也就是说,客户端发起连接后,如果没消息,就一直不返回Response给客户端。直到有消息才返回,返回完之后,客户端再次建立连接,周而复始。)每隔一段时间就发出一个询问,了解服务器是否有新的消息。因此,ajax轮询 需要服务器有很快的处理速度和资源,long poll 需要有很高的并发。

WebSocket

WebSocket只需要一次HTTP请求,让客户端发起请求,跟服务器端协商好建立WebSocket协议后就可以通信了,服务器端有新的消息就可以主动告知客户端。WebSocket只需要一次HTTP握手,所以说整个通讯过程是建立在一次连接/状态中,也就避免了HTTP的非状态性,服务端会一直知道你的信息,直到你关闭请求。相比之下,传统的方式要不断的建立,关闭HTTP协议,由于HTTP是非状态性的,每次都要重新传输 identity info (鉴别信息),来告诉服务端你是谁。


socket.io

node.js提供了高效的服务端运行环境,但是由于浏览器端对HTML5的支持不一,为了兼容所有浏览器,提供卓越的实时的用户体验,并且为程序员提供客户端与服务端一致的编程体验,于是socket.io诞生。在不支持websoket的浏览器中,socket.io可以降级为其他的通信方式,比如有AJAX long polling ,JSONP Polling等。

socket.io由JavaScript实现、基于Node.js、支持WebSocket协议用于实时通信、跨平台的开源框架,它包括了客户端的JavaScript和服务器端的Node.js。也就是说Socket.io将Websocket和轮询(Polling)机制以及其它的实时通信方式封装成了通用的接口,并且在服务端实现了这些实时通信机制。Socket.io中主要使用了websocket,将轮询作为其辅助选项,提供的是相同的接口。其与node.js一样,也是事件驱动的。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 要实现一个基于 Node.js 和 Socket.io 的多人聊天室,可以按照以下步骤: 1. 安装 Node.js 和 Socket.io 在命令行中输入以下命令安装 Node.js 和 Socket.io: ``` npm install node npm install socket.io ``` 2. 创建服务器 创建一个 `server.js` 文件作为服务器,引入 Node.js 和 Socket.io: ```javascript const http = require('http'); const socketIO = require('socket.io'); ``` 创建一个 HTTP 服务器: ```javascript const server = http.createServer((req, res) => { res.writeHead(200, {'Content-Type': 'text/html'}); res.end('<h1>Hello World!</h1>'); }); ``` 启动服务器: ```javascript server.listen(3000, () => { console.log('Server started on port 3000'); }); ``` 3. 创建 Socket.io 实例 创建一个 Socket.io 实例并将其连接到 HTTP 服务器上: ```javascript const io = socketIO(server); ``` 4. 处理连接和断开事件 当有客户端连接到服务器时,Socket.io 会触发 `connection` 事件: ```javascript io.on('connection', (socket) => { console.log('A user connected'); }); ``` 当客户端断开连接时,Socket.io 会触发 `disconnect` 事件: ```javascript socket.on('disconnect', () => { console.log('A user disconnected'); }); ``` 5. 实现聊天功能 当客户端发送消息时,服务器会将消息广播给所有连接的客户端: ```javascript socket.on('chat message', (msg) => { io.emit('chat message', msg); }); ``` 当客户端连接时,服务器会将欢迎消息广播给所有连接的客户端: ```javascript io.emit('chat message', 'A user has joined the chat'); ``` 当客户端断开连接时,服务器会将离开消息广播给所有连接的客户端: ```javascript io.emit('chat message', 'A user has left the chat'); ``` 6. 客户端实现 在客户端 HTML 文件中,引入 Socket.io: ```html <script src="/socket.io/socket.io.js"></script> ``` 连接到服务器: ```javascript const socket = io(); ``` 发送消息: ```javascript $('form').submit(() => { socket.emit('chat message', $('#m').val()); $('#m').val(''); return false; }); ``` 接收消息: ```javascript socket.on('chat message', (msg) => { $('#messages').append($('<li>').text(msg)); }); ``` 这样,一个基于 Node.js 和 Socket.io 的多人聊天室就完成了。 ### 回答2: Node.js是一个基于事件驱动的JavaScript运行环境,可以用于服务端应用程序的开发。Socket.io是一个基于WebSocket的协议的实时通信库,它可以让浏览器和服务端建立持久的双向通信连接。 要实现一个多人聊天室,可以使用Node.js和Socket.io来建立服务端和客户端之间的通信。下面是大致的步骤: 1. 服务端的配置: - 使用npm安装Node.js和Socket.io。 - 创建一个Node.js的服务器,并引入Socket.io库。 - 在服务器上监听客户端的连接事件,当有新的客户端连接时,建立与其的Socket连接。 - 在Socket连接上监听客户端发送的消息,并将其广播给所有连接到服务器的客户端。 2. 客户端的配置: - 在HTML文件中引入Socket.io库。 - 在JavaScript文件中创建Socket对象,建立与服务器的连接。 - 在Socket连接上监听服务器发送的消息,并将其显示在页面上。 通过以上的步骤,就可以实现基本的多人聊天室了。当有新的客户端连接到服务器时,服务器会给所有客户端发送一个欢迎消息。当某个客户端发送消息时,服务器会将该消息广播给所有客户端,以实现消息的同步。 当然,这只是一个简单的示例。在实际应用中,我们可能还需要处理用户认证、私聊功能、展示在线用户列表等额外的功能。 总而言之,使用Node.js和Socket.io可以轻松实现多人聊天室,同时提供实时通信的功能。它们的简洁和高效性使得开发实时应用变得更加容易。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值