cocosCreator 3.x wss实现通信加密

cocosCreator 3.x 跟着chatGpt学通信加密

将大象关进冰箱的第一步：什么是通信加密？
chatGpt的回答是：
通信加密是一种用于保护信息传输安全性的技术或方法，其主要目的是防止未经授权的访问者或恶意第三方拦截、窃取或篡改通信数据。通信加密通过将通信内容转化为不可读或难以理解的形式，以确保只有授权的接收方能够解密和理解信息。

我的理解是：
加密通信内容，以防止信息泄露、篡改的一种手段。

补充：

·将大象关进冰箱的第二步：如何实现可跨平台的加密通信？·
chatGpt的回答是：

因为这里前后端实现可以有多种方式，我采用前端：websocket + cocosCreator3.7.3,后端：node.js去实现一个案例.

以下是chatGpt给出的实现步骤：

接下来轮到我根据图纸造轮子了！
第一步，先建立一个基本的测试项目如下：

第二步，生成自签名文件（.crt) 和私钥文件（.pem)。这里步骤较多，我列举如下：
1.安装OpenSSL: 下载连接(https://slproweb.com/products/Win32OpenSSL.html)
安装步骤如下：

下一步的安装位置自行选择

下面这一步的是关于支持money的，大家可以自行勾选，也可以一个都不勾选。

最后win + r打开控制台，输入openssl version检查是否安装成功。

如果没成功，可能是因为没有配置系统环境变量，配置如下：

系统变量新建一个：

用户变量需要编辑Path，新增如下：

最后再测试一下openssl version看是否配置成功。
2.生成ssl签名证书。
流程如下：
a.下载文中的mkcert.exe文件。
b.在该文件的目录下打开命令窗口执行命令：mkcert.exe -install

c.执行命令：mkcert localhost 127.0.0.1 （这里localhost 127.0.0.1可以换成你的域名或者公网ip）

这样就已经生成了我们需要的密钥xxx-key.pem文件和xxx.pem证书文件。

第二步，编写网络模块基本代码（脚本：Network）：

这需要将刚才生成的密钥xxx-key.pem文件放在项目中（路径可以自定，只有引用的路径能对上就行）。

同时这里发现有报错，原因时需要安装对应的依赖，安装的命令行如下：
npm install crypto-js

现在报错已经解决！
网络代码模块对应关键代码都有注释，这里我就不再赘述。

接下来是完成对应的客户端代码及功能。
第三步，编写客户端基本代码（脚本：Main）：

其中sendMessage方法需要挂载到send按钮上，来完成事件的注册。

第四步，简单完成服务端代码（脚本：server）
1.新建server文件夹以及server.js脚本

const CryptoJS = require('crypto-js');
const WebSocket = require('ws');
const https = require('https');
const fs = require('fs');

// 读取SSL/TLS证书文件
secretKey = './xxx-key.pem';
secretCrt = './xxx.pem';
const privateKey = fs.readFileSync(secretKey, 'utf8'); // 替换为您的私钥文件路径
const certificate = fs.readFileSync(secretCrt, 'utf8'); // 替换为您的证书文件路径
const credentials = { key: privateKey, cert: certificate };

// 创建HTTPS服务器
const httpsServer = https.createServer(credentials);

// 创建WebSocket服务器，将它附加到HTTPS服务器
const wss = new WebSocket.Server({ server: httpsServer });

// WebSocket连接建立时触发
wss.on('connection', (ws) => {
  console.log('WebSocket连接已建立');

  // 监听WebSocket消息接收事件
  ws.on('message', (message) => {
    const bufferData = message /* 从前端接收的 Buffer 数据 */;
    const jsonData = bufferData.toString('utf-8'); // 使用正确的编码格式
    console.log('服务端收到的数据：', jsonData);
    
    // 加密后的数据
    const encryptedData = jsonData; // 替换为服务器收到的加密数据
    // 解密
    const data = CryptoJS.AES.decrypt(encryptedData, secretKey);
    // 将解密后的数据转换为原始文本
    let originalText = data.toString(CryptoJS.enc.Utf8);
    console.log('解密后的数据：', originalText);

    // 使用AES加密算法加密数据
    originalText = CryptoJS.AES.encrypt(originalText + '加密', secretKey).toString();
    console.log('加密后的数据2：', encryptedData)

    ws.send(originalText);
  });

  // WebSocket连接关闭时触发
  ws.on('close', () => {
    console.log('WebSocket连接已关闭');
  });

  // WebSocket连接错误时触发
  ws.on('error', (error) => {
    console.error('WebSocket连接错误：', error);
  });
});

// 启动HTTPS服务器，监听指定端口
httpsServer.listen(3000, () => {
  console.log('HTTPS服务器已启动，监听端口3000');
});

这里实现的是一个通过wss安全连接服务，通过前端发送加密数据，然后服务进行解密后加上 ‘加密’ 在返回给客户端，客户端进行解密收到的数据后进行一个控制台的打印。

2.将刚才生成的生成自签名文件放在服务器项目下的路径下并进行地址引用。

在server文件夹里面打开终端输入：npm install ws 来安装websocket依赖

现在启动服务，在终端输入 node server.js 启动监听3000端口。

最后我们实际运行起来，看看实际的加密效果！
客户端如下：

服务端如下：

总结

例如：本文只是一个自我学习案例分享给大家，仅供参考！制作不易，留个三连吧~
附上项目源码：https://github.com/LvoInGit/TestDemo.git