前言

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

废话不多说,上代码

my-ws.js

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

// 判断是不是json字符串
const isJsonStr = (str) => {
if (typeof str == 'string') {
try {
var obj = JSON.parse(str);
if (typeof obj == 'object' && obj) {
return true;
} else {
return false;
}
} catch (e) {
console.log('error:' + str + '!!!' + e);
return false;
}
}
}; // 判断是不是json
const isJson = (data) => {
const typeofRes = typeof (data) == "object";
const toStringRes = Object.prototype.toString.call(data).toLowerCase() == "[object object]";
const isLen = !data.length;
return typeofRes && toStringRes && isLen;
} // 重写ws,便于传参和接参数--主要是json序列化和反序列化
const myWs = new Proxy(ws, {
get(obj, prop) {
const value = obj[prop];
if (!typeof value === "function") { return obj[prop]; }
//如果不这么做会出现this指向问题:https://juejin.cn/post/6844903730987401230
return (...args) => {
//处理ws上传消息的json格式转换成字符串
if ( isJson(args[0]) && prop==='send') {
args[0] = JSON.stringify(args[0]);
}
return value.apply(obj, args)
}
},
set(obj, prop, value) {
if (prop !=='onmessage') {
obj[prop] = value
}else{
obj[prop] = function(e) {
const res = null;
if (isJsonStr(e.data)) {
value({
...e,
...JSON.parse(e.data)
})
}else{
value(e)
}
}
}
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,可以直接使用

websocket拦截器,统一处理参数和返回值json数据的更多相关文章

  1. springmvc-高级参数绑定-映射-异常-json数据交互-拦截器

    1.1. 高级参数绑定 1.1.1. 复制工程 把昨天的springmvc-web工程复制一份,作为今天开发的工程 复制工程,如下图: 粘贴并修改工程名为web2,如下图: 工程右键点击,如下图: 修 ...

  2. SpringMVC源码学习:容器初始化+MVC初始化+请求分发处理+参数解析+返回值解析+视图解析

    目录 一.前言 二.初始化 1. 容器初始化 根容器查找的方法 容器创建的方法 加载配置文件信息 2. MVC的初始化 文件上传解析器 区域信息解析器 handler映射信息解析 3. Handler ...

  3. Spring框架下的 “接口调用、MVC请求” 调用参数、返回值、耗时信息输出

    主要拦截前端或后天的请求,打印请求方法参数.返回值.耗时.异常的日志.方便开发调试,能很快定位到问题出现在哪个方法中. 前端请求拦截,mvc的拦截器 import java.util.Date; im ...

  4. Java加载jar文件并调用jar文件当中有参数和返回值的方法

    在工作当中经常遇到反编译后的jar文件,并要传入参数了解其中的某些方法的输出,想到Java里面的反射可以实现加载jar文件并调用其中的方法来达到自己的目的.就写了个Demo代码. 以下的类可以编译生成 ...

  5. 2. Bean Validation声明式校验方法的参数、返回值

    你必须非常努力,才能干起来毫不费力.本文已被 https://www.yourbatman.cn 收录,里面一并有Spring技术栈.MyBatis.JVM.中间件等小而美的专栏供以免费学习.关注公众 ...

  6. Java开发学习(十八)----AOP通知获取数据(参数、返回值、异常)

    前面的博客我们写AOP仅仅是在原始方法前后追加一些操作,接下来我们要说说AOP中数据相关的内容,我们将从获取参数.获取返回值和获取异常三个方面来研究切入点的相关信息. 前面我们介绍通知类型的时候总共讲 ...

  7. 速战速决 (3) - PHP: 函数基础, 函数参数, 函数返回值, 可变函数, 匿名函数, 闭包函数, 回调函数

    [源码下载] 速战速决 (3) - PHP: 函数基础, 函数参数, 函数返回值, 可变函数, 匿名函数, 闭包函数, 回调函数 作者:webabcd 介绍速战速决 之 PHP 函数基础 函数参数 函 ...

  8. java Servlet+mysql 调用带有输入参数和返回值的存储过程(原创)

    这个数据访问的功能,我在.NET+Mysql .NET+Sqlserver  PHP+Mysql上都实现过,并且都发布在了我博客园里面,因为我觉得这个功能实在是太重要,会让你少写很多SQL语句不说,还 ...

  9. paip.java 多线程参数以及返回值Future FutureTask 的使用.

    paip.java 多线程参数以及返回值Future FutureTask 的使用. 在并发编程时,一般使用runnable,然后扔给线程池完事,这种情况下不需要线程的结果. 所以run的返回值是vo ...

  10. c&c++函数的参数和返回值的传递终结版

    c++函数的参数和返回值的传递方式有三种:值传递.指针传递和引用传递. 在这之前先看几个例子: 一, int a=10; int b=a; b+=10; 此时b是a的一个拷贝,改变b的值,a并不会受到 ...

随机推荐

  1. Java提交到MySQL数据库出现中文乱码

    1)使用文本或者链接地址写到代码中(不推荐)时,实例如下: jdbc:mysql://localhost:3306/tms?useUnicode=true&characterEncoding= ...

  2. VSCode输出框中文乱码问题

    vscode输出中文的时候,总是出现乱码.找了一个一劳永逸解决问题的方法,转载的,原教程地址:https://blog.csdn.net/a19990412/article/details/90270 ...

  3. 关于全球化大规模混合云 Kubernetes Prometheus 监控体系标准化及 GitOps 自动化改进方案

    背景 现状 某司概况: PaaS/SaaS 公司,业务面向全球,包括 东南亚/南亚/中东/欧洲/非洲/美洲/东亚... 生产 k8s 集群数十套,生产非生产 >100 套(多种集群类型,各种公有 ...

  4. 你常用哪些工具来分析 JVM 性能?

    常用的 JVM 性能分析工具 JVM 性能分析工具主要用于监控.调试和优化 Java 程序的性能,尤其是在垃圾回收.内存泄漏.线程调度等方面.以下是一些常用的 JVM 性能分析工具: 1. jvisu ...

  5. nodejs隐藏窗口启动redis服务,一个vbs文件即可

    网上也有很多类似的,但基本都是用nodejs调.vbs,然后间接调.bat,经过多番尝试发现其实合并为一个文件亦可 将如下内容保存为.vbs文件,如startRedis.vbs (在nw的根目录) s ...

  6. SpringBoot事件和监听器

    事件和监听器 生命周期监听 场景:监听应用的生命周期 监听器-SpringApplicationRunListener 自定义SpringApplicationRunListener来监听事件: 1. ...

  7. 逻辑与(&)、短路与(&&)、逻辑或(|)、短路或(||)

    目录 逻辑与(&).短路与(&&).逻辑或(|).短路或(||)的区别 逻辑与(&) 短路与(&&) 逻辑或(|) 短路或(||) 逻辑与(&) ...

  8. latex常用符号及模板

    \le \ge \in \mathbb{M} a \qquad b \ne \forall \exists \left \lfloor \right \rfloor \nmid \varnothing ...

  9. 网络编程:poll

    原理 和select类似,只是描述fd集合的方式不同,poll使用pollfd结构而非select的fd_set结构. 管理多个描述符也是进行轮询,根据描述符的状态进行处理,但poll没有最大文件描述 ...

  10. 远程服务器(腾讯云轻量服务器)上安装SQL Server以及SQL Server Management Studio,以及EFCore对其的连接

    SQL Server的安装 下载地址:https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 安装教程参考:https://bl ...