Nodejs Socket.io在线聊天室
Nodejs Socket.io在线聊天室
前言：
网络聊天室在web1.0的时代就出现了，但当时技术支持比较有限，大都是通过浏览器插件BHO，JavaApplet，Flash实现的。如今HTML5技术风起云涌，通过websocket实现的网络聊天室，被定义为websocket的第一个实验，就像Hello World一样的简单。
今天我也动手完成了这个实验，感觉真的很爽！
文章目录：
- socket.io介绍
- 服务器端和客户端通信设计
- 服务器端实现
- 客户端实现
- 完整案例代码
请查看博客文章
Nodejs Socket.io在线聊天室
前言：
网络聊天室在web1.0时代就已经存在，但当时的实现方式通常依赖于浏览器插件（如BHO、Java Applet或Flash）。随着HTML5技术的发展，WebSocket成为实现实时通信的首选方案。本文将通过一个简单的例子展示如何使用Node.js和Socket.io来构建一个在线聊天室。
文章目录：
- socket.io介绍
- 服务器端和客户端通信设计
- 服务器端实现
- 客户端实现
- 完整案例代码
socket.io介绍
Socket.io 是一个基于 WebSocket 的库，它提供了跨浏览器的实时通信功能。它不仅支持 WebSocket 协议，还支持其他一些协议（如长轮询）作为后备方案，以确保兼容性。
服务器端和客户端通信设计
在Socket.io中，服务器端和客户端之间的通信主要通过事件驱动的方式进行。服务器端可以发送事件给客户端，客户端也可以发送事件给服务器端。例如，当用户在聊天室输入消息时，客户端会发送一个“message”事件到服务器，服务器接收到该事件后，再将消息广播给所有连接的客户端。
服务器端实现
npm install express socket.io
然后创建服务器端代码：
// server.js
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('New client connected');
socket.on('message', (data) => {
console.log(data);
// 将消息广播给所有客户端
io.emit('message', data);
});
socket.on('disconnect', () => {
console.log('Client disconnected');
});
});
server.listen(3000, () => {
console.log('Server is running on port 3000');
});
客户端实现
客户端需要引入Socket.io客户端库，并建立与服务器的连接：
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chat Room</title>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<input type="text" id="chat-input" placeholder="Type a message...">
<button onclick="sendMessage()">Send</button>
<div id="messages"></div>
<script>
const socket = io();
function sendMessage() {
const message = document.getElementById('chat-input').value;
socket.emit('message', message);
document.getElementById('chat-input').value = '';
}
socket.on('message', (data) => {
const messagesDiv = document.getElementById('messages');
const newMessage = document.createElement('div');
newMessage.textContent = data;
messagesDiv.appendChild(newMessage);
});
</script>
</body>
</html>
完整案例代码
完整的代码可以在GitHub上找到：这里
以上就是使用Node.js和Socket.io构建在线聊天室的基本步骤。希望这篇文章能帮助你快速入门WebSocket和实时通信技术。
app.js代码
// 发送到自己的 socket.emit(‘message’,obj);
// 广播向其他用户发消息 socket.broadcast.emit(‘message’,obj);
