websocket拦截器，统一处理参数和返回值json数据

2021-05-26 19:35:21 阅读：138 来源： 互联网

标签：function 拦截器 websocket prop myWs json ws obj data

前言

传统的ws，发送前后都需要json序列化和反序列化
这对编写代码并不友好。
所以我做了个优化

废话不多说，上代码

my-ws.js

const ws = new WebSocket("ws://dshvv.com:7777/my_ws"); 

// 重写ws，便于传参和接参数--主要是json序列化和反序列化
const myWs = new Proxy(ws, {
    get(obj, prop) {
        if(prop === 'send'){
            return function(e){
                const data = JSON.stringify(e);
                obj[prop](data);
            };
        }else{
            return obj[prop];
        }
    },
    set(obj, prop, value) {
        if (prop === 'onmessage') {
            obj[prop] = function (e) {
                const data = JSON.parse(e.data);
                value(data)
            }
        }else{
            obj[prop] = value;
        }
        return true;
    }
});

// 封装一些常用的消息类型推送（不是必须）
myWs.sendMsg = function (event, data) {
    this.send({ event, data })
}
myWs.sendHello = function (data) {
    this.sendMsg('hello', data)
}
myWs.sendHi = function (data) {
    this.sendMsg('hi', data)
}

使用如下 index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="./my-ws.js"></script>
    <script>
        myWs.onopen = () => {
            myWs.send({ type: 'eat', data: '我吃饭啦' });
            myWs.sendHello({ name: '小明', content: '你好' });
            myWs.sendHi({ name: '苍老师', content: 'こんにちは' });
        }
        myWs.onmessage = (data) => {
            console.log(data);
        }
    </script>
</body>

</html>

效果

优点
1、使用起来方便，不用再啰里啰唆的处理数据，

2、甚至可以根据业务需求来对某些请求或相应拦截，加入业务处理

3、同时又不会污染原来的ws对象，如果向用原ws，可以直接使用

标签：function,拦截器,websocket,prop,myWs,json,ws,obj,data
来源： https://www.cnblogs.com/dshvv/p/14814750.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

websocket拦截器，统一处理参数和返回值json数据