如何使用 Socket.io 实现在线图片编辑
引言
随着移动互联网的发展，许多业务需要在线图片编辑，比如头像编辑、图片裁剪、图片合成等。实现这些功能可以让用户更方便地进行个性化的定制，也能够提高用户的粘性和使用体验。接下来，本文将向大家介绍如何使用 Socket.io 实现在线图片编辑。
Socket.io 简介
Socket.io 是一个基于 Node.js 的实时通讯库，在线实时编辑的关键技术。它实现了浏览器和服务器的双向通信，支持多种协议，包括 WebSockets 。Socket.io 可以使服务器端和客户端之间通过事件进行通信，这极大地简化了实时通信的复杂性。
需求分析
我们的需求是实现线上图片编辑，并实时展示编辑结果，同时多个用户可以同时在线协同编辑同一张图片。我们需要使用 Socket.io 实现以下功能：
上传图片：当用户选择一张本地图片时，将其上传到服务端。
编辑图片：服务端将图片传递给客户端，客户端可以进行编辑，然后将修改后的图片发送给服务端。
实时预览：服务端接受到来自多个客户端传递过来的图片后，可以将其合并成一张最终的编辑结果，并发送给所有在线用户，实现实时预览。
技术实现
服务端代码
首先，我们需要使用 Node.js 创建一个服务端，监听客户端的连接请求，读取客户端传递的图片，并将图片传递给其他在线的客户端。服务端代码如下：
// javascriptcn.com 代码示例
const app = require('http').createServer(handler);
const io = require('socket.io')(app);
const fs = require('fs');
const path = require('path');
app.listen(8080);
function handler(req, res) {
fs.readFile(__dirname + '/index.html', function (err, data) {
if (err) {
res.writeHead(500);
return res.end('Error loading index.html');
}
res.writeHead(200);
res.end(data);
});
}
io.on('connection', function (socket) {
socket.on('uploadImage', function (data) {
const imgData = data.replace(/^data:image\/\w+;base64,/, '');
const buffer = new Buffer.from(imgData, 'base64');
fs.writeFile(path.join(__dirname, 'image.png'), buffer, function (err) {
if (err) throw err;
socket.broadcast.emit('uploadImage', buffer.toString('base64'));
});
});
});
在上面的代码中，我们首先创建了一个 HTTP 服务器并监听 端口8080 。同时，我们通过使用 socket.io 模块为 HTTP 服务器添加了 WebSocket 的支持，并让其监听客户端的连接请求。服务端使用 fs 模块读取本地图片，并将其传递给其他连接上的客户端。当收到来自客户端的 uploadImage 事件后，服务端将收到的图片转为 Buffer 格式并保存到本地，同时将图片的 Base64 编码传递给其他客户端。
客户端代码
下面我们来完成客户端代码。我们首先需要在 HTML 文件中添加一个用于上传图片的表单，并添加一个 Canvas 元素用于绘制图片。代码如下：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>图片编辑器</title>
</head>
<body>
<form id="uploadForm">
<input type="file" id="fileInput" accept="image/*">
<button type="submit">上传图片</button>
</form>
<canvas id="canvas"></canvas>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
socket.on('uploadImage', function (data) {
const img = new Image();
img.onload = function () {
context.drawImage(img, 0, 0);
};
img.src = 'data:image/png;base64,' + data;
});
document.getElementById('uploadForm').addEventListener('submit', function (event) {
event.preventDefault();
const fileInput = document.getElementById('fileInput');
if (fileInput.files.length === 0) {
alert('请选择上传的图片！');
return;
}
const reader = new FileReader();
reader.onloadend = function () {
const dataUrl = reader.result;
socket.emit('uploadImage', dataUrl);
const img = new Image();
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 0, 0);
};
img.src = dataUrl;
};
reader.readAsDataURL(fileInput.files[0]);
});
</script>
</body>
</html>在上面的代码中，我们先通过 socket.io 库创建了一个连接，并监听了服务端传来的 uploadImage 事件。当收到该事件后，我们将 Base64 编码转为 Image 对象，并通过 Canvas 上下文对象将其绘制出来。
同时，我们还创建了一个表单，并加入了一个文件输入框，用于上传本地的需要编辑的图片。当上传按钮被点击时，我们使用 FileReader 读取本地图片的内容，然后通过 Socket.emit 将图片传递给服务端，并在图片读取完成后绘制在 Canvas 上。
实现协同编辑
我们已经完成了上传和编辑图片的功能，下面我们来实现协同编辑的功能。由于 Socket.io 可以支持多个客户端之间的双向通信，因此我们可以使用它将多个客户端的编辑结果进行合并，并将最终的结果实时地传递给所有在线用户。
客户端代码修改如下：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<title>图片编辑器</title>
<meta charset="utf-8">
<style type="text/css">
body{margin:0;padding:0}
#canvas{border: 1px solid #c3c3c3}
</style>
<head>
<body>
<canvas id="canvas"></canvas>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const peers = {}; // 所有在线用户的连接
socket.on('connect', function () {
console.log('connect');
});
socket.on('joined', function (id) {
console.log(id, "-----joined");
const peer = new Peer(id, 12345);
peers[id] = peer;
// 接收其他用户发送的数据流
peer.on('data', function (data) {
const img = new Image();
img.onload = function () {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(img, 0, 0);
};
img.src = data;
});
// 接收其他用户的 video 流
peer.on('stream', function(stream) {
//TODO
});
});
// 向其他用户发送数据流
function sendStream() {
const dataUrl = canvas.toDataURL('image/png');
for (const id in peers) {
const peer = peers[id];
peer.send(dataUrl);
}
}
document.addEventListener("DOMContentLoaded", function(event) {
socket.on('connect', function () {
socket.emit('join');
});
socket.on('peer_disconnected', function (id) {
console.log(id, "-----peer_disconnected");
peers[id].destroy();
delete peers[id];
});
});
// canvas 鼠标事件绑定
canvas.onmousedown = function (e) {
const startX = e.offsetX;
const startY = e.offsetY;
context.beginPath();
context.moveTo(startX, startY);
canvas.onmousemove = function (e) {
const newX = e.offsetX;
const newY = e.offsetY;
context.lineTo(newX, newY);
context.stroke(); // 画线
sendStream(); // 将画线的结果传递给其他用户
};
canvas.onmouseup = function () {
canvas.onmousemove = null;
sendStream();
};
};
</script>
</body>
</html>服务端代码修改如下：
// javascriptcn.com 代码示例
const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);
app.use('/public', express.static(__dirname + '/public'));
const SocketIdMap = {};
io.on('connection', function (socket) {
console.log('a user connected', socket.id);
socket.emit('joined', socket.id);
socket.join('room1');
socket.on('disconnect', function () {
console.log('user disconnected');
io.to('room1').emit('peer_disconnected', socket.id);
for (let id in SocketIdMap) {
if (SocketIdMap[id] === socket.id) {
delete SocketIdMap[id];
break;
}
}
delete io.sockets.connected[socket.id];
});
// 加入房间（房间名可以用动态的）
socket.on('join', function () {
console.log(socket.id + ' join the room');
SocketIdMap[socket.id] = socket.id; // 直接以socket的id做值
});
});
http.listen(3000, function () {
console.log('listening on *:3000');
});在上述代码中，我们首先利用了数据流(Stream)的方式，将客户端所做的每一个动作以及编辑结果同步给其他在线客户端。当接收到其他用户发送的数据流时，我们会从流中读取到编辑结果，并将其绘制在 canvas 上。同时，客户端也可以通过鼠标事件在 canvas 上添加各种不同的图形，当有新的图形被添加时，我们也需要将其同步给其他用户。因此我们在鼠标事件回调函数中加入了一个 sendStream() 方法，用于将画线的结果传递给其他在线用户。
除了同步数据流外，我们还需要使用服务端保存所有在线用户的 Socket 连接，这样才能实现客户端之间的通信。在本文中，我们使用了一个叫做 SocketIdMap 的映射来保存所有在线用户的连接，这样可以便于后续查找并操作这些连接。
总结
本文详细介绍了如何使用 Socket.io 实现在线图片编辑，并实现了多客户端协同编辑的功能。在实际生产中，我们需要结合自己的业务需求，结合 Socket.io 的强大功能来满足业务需求。虽然本篇笔者为大家示例了实现方案，但是在实际生产中也有可能在路由设计、系统并发、可用性等方面遇到问题，因此，希望可以给大家提供一些参考，并鼓励大家不断尝试和探索，用心学习和开发前端技术，不断提高自己的实战能力。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65391b727d4982a6eb2593be