websocket拦截器，统一处理参数和返回值json数据
前言
传统的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>Documenttitle>
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，可以直接使用
原文：https://www.cnblogs.com/dshvv/p/14814750.html