前言
傳統的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，可以直接使用