开发需求：
前端向客户端 传输数据 进行加密
* 逻辑 先把数据base64加密 然后异或 异或完之后 在base64加密
- 框架 vue
- 加密方法 js-base64 + 异或算法
1.在项目中下载 js-base64
yarn add js-base64 //如果没有安装 yarn 也可以使用 npm
2.在main.js中引入 base64
import jsBase64 from 'js-base64' Vue.use(jsBase64)
3、使用的过程
jsBase64.encode(this.pwd);//加密 jsBase64.decode(this.pwd);//解密
后端代码：
本篇主要讲前端逻辑 后端代码仅供参考
先把数据base64加密 然后异或
解密过程一样得 先base64解密 在异或
前端代码：
首先创建 webSocket
this.webSocketObj = new WebSocket(url);// 这里的url是 跟客户端对接的 url地址 this.webSocketObj.onmessage = this.onMessage; // 客户端接受服务端数据时触发 this.webSocketObj.onopen = this.onOpen; //连接建立时触发 this.webSocketObj.onerror = this.onError; //通信错误时触发 this.webSocketObj.onclose = this.onClose;//连接关闭时触发
这里主要展示 this.onOpen 连接建立时的代码逻辑
//连接成功建立的回调方法 onOpen() { if (this.webSocketObj.readyState === 1) { // 0：未连接 1：连接已建立 2.连接z正在关闭 3.连接已关闭或打不开连接 let c_1 = `{"messag": "success"}`;// 这里是跟客户端约定的值 let b_1 = Method(c_1); // 调用加密方法 let Method = (val) => { // 加密 let = this.jsBase64.encode(val);// 进行第一次加密 let appointment = "A";// 异或 的值 A 跟客户端进行约定 let message = ""; // 用来存储 新值 for (var i = 0; i < val.length; i++) { if (0 == i % 2) { // 进行异或的判断 // 字符串个数 取余为0得 才异或 message += String.fromCharCode(val.charCodeAt(i) ^ appointment.charCodeAt(0)); } else { message += val[i]; } } return this.jsBase64.encode(message); // 异或过的值 进行二次加密 }; this.webSocketObj.send(b_1);// 最后将加密过的数据 传给客户端 } },
如果 客户端需要 把加密的数据传输给前端，前端通过this.onMessage 方法进行解密
总结：
以上就是 Websocket 前端实现 base64 + 异或 加密的方法
对于 Websocket 简单的使用，想了解更多的Websocket 知识 可以私信我一起探讨。
