Websocket 加密数据加密 js-base64 + 异或开发需求：后端代码：前端代码：总结：

95 阅读 0 评论 63 点赞

我是靠谱客的博主自觉星星，这篇文章主要介绍Websocket 加密数据加密 js-base64 + 异或开发需求：后端代码：前端代码：总结：，现在分享给大家，希望可以做个参考。

开发需求：

前端向客户端传输数据进行加密

* 逻辑先把数据base64加密然后异或异或完之后在base64加密

框架 vue
加密方法 js-base64 + 异或算法

1.在项目中下载 js-base64

复制代码

1
yarn add js-base64 //如果没有安装 yarn 也可以使用 npm

2.在main.js中引入 base64

复制代码

1
2
3
import jsBase64 from 'js-base64'
Vue.use(jsBase64)

3、使用的过程

复制代码

1
2
jsBase64.encode(this.pwd);//加密
jsBase64.decode(this.pwd);//解密

后端代码：

本篇主要讲前端逻辑后端代码仅供参考

先把数据base64加密然后异或

解密过程一样得先base64解密在异或

前端代码：

首先创建 webSocket

复制代码

1
2
3
4
5
6
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 连接建立时的代码逻辑

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//连接成功建立的回调方法
    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);// 最后将加密过的数据 传给客户端
      }
     },