我要评论引言
在现代网络应用中，实时通信变得越来越重要。node.js，作为一个基于chrome v8引擎的javascript运行环境，使得开发者能够在服务器端运行javascript代码，而socket.io则为node.js提供了一个强大的实时通信库。本文将通过一个简单的示例，展示如何使用node.js和socket.io创建一个能够实现实时通信的服务器。
1. 环境准备
在开始之前，请确保你已经安装了node.js。你还需要安装socket.io库，可以通过npm（node.js的包管理器）来安装：
npm install socket.io
2. 创建http服务器
首先，我们需要创建一个http服务器，用于提供静态文件服务，比如html页面。以下是创建http服务器的代码：
const http = require("http");
const fs = require("fs");
// 创建http服务器
let server = http.createserver((request, response) => {
// 读取htmlpage.html文件
fs.readfile("htmlpage.html", (error, data) => {
response.writehead(200, { 'content-type': 'text/html' });
response.end(data);
});
}).listen(52273, () => {
console.log('服务器地址: http://127.0.0.1:52273');
});
在这段代码中，我们使用了node.js的http模块来创建一个服务器，该服务器监听52273端口。当有http请求到达时，服务器会读取并返回htmlpage.html文件的内容。
3. 集成socket.io
接下来，我们将集成socket.io来实现websocket通信。以下是集成socket.io并设置websocket事件监听的代码：
const socketio = require("socket.io");
// 创建websocket服务器
let io = socketio.listen(server);
// 监听websocket服务器的connection事件
io.sockets.on("connection", (socket) => {
console.log("客户端已经连接！！");
socket.on('clientdata', (data) => {
console.log('客户端发来的数据：', data);
// 向客户端发送serverdata事件和数据
socket.emit('serverdata', data);
});
});
在这段代码中，我们首先引入了socket.io模块，并使用listen方法创建了一个websocket服务器，绑定到我们之前创建的http服务器实例上。然后，我们监听connection事件，当有新的客户端连接时，会触发这个事件。
在客户端中接收：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
<!--
这行代码通过 <script> 标签引入了 socket.io 的客户端库。
这个库允许浏览器与服务器建立 websocket 连接，并发送或接收事件。
socket.io.js 文件通常由服务器端的 socket.io 库在指定的路径下提供。
-->
<script src="/socket.io/socket.io.js"></script>
<script>
window.onload = function(){
// 连接socket
// 这行代码创建了一个新的 socket 对象，用于与服务器建立连接。
// io.connect() 方法是 socket.io 库提供的一个函数，用于初始化一个新的连接。
// 如果没有指定服务器地址，它默认尝试连接到与当前页面相同的主机和端口。
// 指定地址如：const socket = io.connect('http://localhost:3000');
var socket = io.connect();
// 监听服务端的事件和数据
socket.on('serverdata',(data)=>{
alert(data) // 这里就是服务端发来的数据
})
// 创建表单点击事件
document.getelementbyid('button').onclick = ()=>{
// 获取表单数据
var text = document.getelementbyid('text').value;
// 向服务端发送clientdata事件和数据
socket.emit('clientdata',text);
}
}
</script>
</head>
<body>
<input type="text" id="text">
<input type="button" id="button" value="send">
</body>
</html>
4. 实现实时通信
在websocket连接建立后，我们可以监听客户端发送的事件，并根据需要向客户端发送事件。以下是实现实时通信的核心代码：
socket.on('clientdata', (data) => {
console.log('客户端发来的数据：', data);
// 向客户端发送serverdata事件和数据
socket.emit('serverdata', data);
});
这段代码监听了名为clientdata的事件，当客户端发送这个事件时，服务器会接收到数据，并打印出来。然后，服务器使用emit方法向客户端发送一个名为serverdata的事件，并将接收到的数据作为参数发送回去。
5. 通信类型
在注释中提到了四种通信类型：
单向通信：只有发送事件的客户端可以收到消息。
io.on('connection', function (socket) {
socket.on('private message', function (msg) {
socket.emit('serverdata', data);
});
});
公共通信：所有客户端（包括发送事件的客户端）都可以收到消息。
io.on('connection', function (socket) {
socket.on('private message', function (msg) {
io.sockets.emit('serverdata', data);
});
});
广播通信：除了发送事件的客户端外，所有其他客户端都可以收到消息。
io.on('connection', function (socket) {
socket.on('private message', function (msg) {
socket.broadcast.emit('serverdata', data);
});
});
指定通信：可以确保只有指定的客户端接收到消息，而其他客户端则不会收到这些信息。
io.on('connection', function (socket) {
socket.on('private message', function (msg) {
io.to(socket.id).emit('private message', msg);
});
});
这些通信类型为开发者提供了灵活的选择，可以根据应用的需求选择合适的通信方式。
6. 整体代码
服务端(后端)代码：
// 引入模块
const http = require("http")
const fs = require("fs")
const socketio = require("socket.io")
// 创建服务器
let server = http.createserver((request, response) => {
// 读取htmlpage.html文件
fs.readfile("htmlpage.html", (error, data) => {
response.writehead(200, { 'content-type': 'text/html' })
response.end(data)
});
}).listen(52273, () => {
console.log('服务器地址: http://127.0.0.1:52273')
})
// 创建websocket服务器
// let io = socket.io.listen(server);：使用 socket.io 模块的 listen 方法创建一个 websocket 服务器，
// 并将其绑定到之前创建的 http 服务器实例上。
let io = socketio.listen(server);
// 监听 websocket 服务器的 connection 事件，当有新的 websocket 客户端连接时触发。
var id=0
io.sockets.on("connection", (socket) => {
// 在回调函数中，socket 参数代表与客户端的 websocket 连接。
console.log("客户端已经连接！！")
id = socket.id
console.log('用户已上线，自动分配了一个id:',id)
socket.on('clientdata', (data) => {
// 输出客户端发来的数据
console.log('客户端发来的数据：', data);
// 这个代码发给的就是最新的id对应的服务端；例如：有a、b、c三个客服端；a发信息的话就会发给c
io.sockets.to(id).emit('serverdata',data)
// 向客户端发送serverdata事件和数据
// socket.emit('serverdata', data);
// 1.单向通信类型：某个客户端发送事件和数据的时候，只有他自己可以收到消息
// 代码： socket.emit('serverdata', data);
// 2.public 通信类型：某个客户端发送事件和数据的时候，其他所有的客户端都可以收到消息，包括 发消息的客户端本身
// 代码： io.sockets.emit('serverdata',data)
// 3.broadcast 通信类型：某个客户端发送事件和数据的时候，其他所有的客户端都可以收到消息，除了 发消息的客户端本身
// 代码： socket.broadcast.emit('serverdata',data)
// 4.private 通信类型：某个客户端向指定的(id)某个客户端发送事件和数据
// 代码：
// id = socket.id
// io.socket.to(id).emit('serverdata',data)
})
})
客户端（前端）代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
<!--
这行代码通过 <script> 标签引入了 socket.io 的客户端库。
这个库允许浏览器与服务器建立 websocket 连接，并发送或接收事件。
socket.io.js 文件通常由服务器端的 socket.io 库在指定的路径下提供。
-->
<script src="/socket.io/socket.io.js"></script>
<script>
window.onload = function(){
// 连接socket
// 这行代码创建了一个新的 socket 对象，用于与服务器建立连接。
// io.connect() 方法是 socket.io 库提供的一个函数，用于初始化一个新的连接。
// 如果没有指定服务器地址，它默认尝试连接到与当前页面相同的主机和端口。
var socket = io.connect();
// 监听服务端的事件和数据
socket.on('serverdata',(data)=>{
alert(data)
})
// 创建表单点击事件
document.getelementbyid('button').onclick = ()=>{
// 获取表单数据
var text = document.getelementbyid('text').value;
// 向服务端发送clientdata事件和数据
socket.emit('clientdata',text);
}
}
</script>
</head>
<body>
<input type="text" id="text">
<input type="button" id="button" value="send">
</body>
</html>
7. 结论
通过上述步骤，我们创建了一个简单的node.js服务器，它能够处理http请求，并使用socket.io实现websocket通信。这个服务器能够接收客户端发送的数据，并能够向客户端发送数据，实现实时通信。这只是一个基础示例，socket.io和node.js的强大功能远不止于此，它们可以支持更复杂的实时应用场景，如多人聊天室、实时游戏等。
以上就是基于node.js和socket.io实现实时通信功能的详细内容，更多关于node.js socket.io实时通信的资料请关注代码网其它相关文章！
发表评论