[CocosCreator]CocosCreator網絡通信：https + websocket + protobuf

環境

cocos creator版本：3.8.0

開發語言：ts

操作系統：windows

http部分

直接使用?XMLHttpRequest 創建http請求

// _getHttpUrl 方法自己寫字符串拼接public httpPostJsonRequest(uri: string, headData: any, data: any, cb: Function) {let xhr: XMLHttpRequest = new XMLHttpRequest();xhr.onreadystatechange = () => {if (xhr.readyState == XMLHttpRequest.DONE) {if (xhr.status == 200) {// statusText:OK https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/statuslet jsonStr: string = xhr.responseText;console.log('tg post response:', jsonStr);cb && cb(null, "", jsonStr);}}}xhr.ontimeout = function (event: ProgressEvent) {console.log(`http post [${uri}] timeout!`);cb && cb(event, "Timeout!", "{}");};xhr.onerror = (event: ProgressEvent) => {console.error('XMLHttpRequest error', event);cb && cb(event, "Request error!", "{}");}let url: string = this._getHttpUrl(uri);xhr.open('POST', url);xhr.setRequestHeader("Content-type", "application/json");if (headData) {for (let k in headData) {xhr.setRequestHeader(k, headData[k]);}}let json = JSON.stringify(data);console.log('send http post request:', json);xhr.send(json);}public httpGetRequest(uri: string, headData: any, cb: NetCbFunc) {let xhr: XMLHttpRequest = new XMLHttpRequest();xhr.onreadystatechange = () => {if (xhr.readyState == XMLHttpRequest.DONE) {if (xhr.status == 200) {// statusText:OK https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/statuslet jsonStr: string = xhr.responseText;console.log('http get response:', jsonStr);cb && cb(null, '', jsonStr);}}}xhr.ontimeout = function (event: ProgressEvent) {console.log('http get request timeout!');cb && cb(event, "Timeout!", "{}");};xhr.onerror = (event: ProgressEvent) => {console.error('XMLHttpRequest error');cb && cb(event, "Request error!", "{}");}if (headData) {for (let k in headData) {xhr.setRequestHeader(k, headData[k]);}}let url: string = this._getHttpUrl(uri);xhr.open('GET', url);console.log('send TG get request:', url);xhr.send();}
websocket部分

websocket認證：因為ts的websocket不能修改header，所以在創建websocket的url參數里添加params作為Authorization認證數據，例如 let ws = new?WebSocket("localhost/ws?token=xxxx");

protobuf部分
安裝環境：
  1. protobufjs?^7.3.2：安裝命令?npm install --save protobufjs

  2. protobufjs-cli：用于導出proto文件為js/ts，安裝命令?npm i -g protobufjs-cli

不安裝 protobufjs-cli 也可以，protobufjs可以直接讀取proto文件，為了ts編寫方便，做了轉換。

轉換命令（放在package.json的scripts下就行）：

  1. ? ? "build-proto:pbjs": "pbjs --dependency protobufjs/minimal.js --target static-module --wrap commonjs --out [導出路徑]/proto.js [proto文件路徑]/*.proto",

  2. "build-proto:pbts": "pbts --main --out [導出路徑]/proto.d.ts [上一步js導出路徑]/*.js"

ts代碼引用：import proto from '[js導出路徑]/proto.js';

多個proto文件都會編入到一個js里。

websocket + protobuf
let ws: WebSocket = null;
function connectGameServer() {ws = new?WebSocket("localhost/ws?token=xxxx");ws.binaryType = "arraybuffer";ws.onopen = (ev: Event) => {}ws.onmessage = (ev: MessageEvent) => {// 解析protobufonMessage(ev);}ws.onerror = (ev: Event) => {}ws.onclose = (ev: CloseEvent) => {}
}function sendWebsocketMessage(buffer: Uint8Array) {if (ws.readyState === WebSocket.OPEN) {ws.send(buffer);}
}
// 發送
function sendRequest(msgId, req) {// 根據msgId獲取到proto對應的類 msgClassconst err = msgClass.verify(req);if (err) {console.log('sendRequest error:', err);return;}let obj: ProtoMsgClass = msgClass.create(req);let writer: protobufjs.Writer = msgClass.encode(obj);// Uint8Array 和 DataView 需要修改工程目錄下的tsconfig.json文件，compilerOptions部分，// "allowSyntheticDefaultImports": true,// "target": "ES2019",// "lib": [ "ES2020",  "dom" ]let messageBuffer: Uint8Array = writer.finish();// 發送的數據格式需要和服務端對齊，這里的是瞎寫的，反正組裝成 Uint8Array 數據格式就行let dv = new DataView(new ArrayBuffer(123));dv.setInt32(0, messageBuffer.length);dv.setBigUint64(4, BigInt(msgId));// 網上找到的這個代碼，因為vscode的錯誤提示改成自己寫的一個方法了。// const targetBuffer = Buffer.concat([new Uint8Array(dv.buffer), messageBuffer])const targetBuffer = BufferConcat(new Uint8Array(dv.buffer), messageBuffer);this.sendWebsocketMessage(targetBuffer);
}public static BufferConcat(buf1: Uint8Array, buf2: Uint8Array): Uint8Array {let buf: Uint8Array = null;if (buf1 && buf2) {let len1 = buf1.length;let len2 = buf2.length;buf = new Uint8Array(len1 + len2);buf.set(buf1);buf.set(buf2, len1);}return buf;}
// 接收
function onMessage(ev: MessageEvent) {const binary = new Uint8Array(ev.data);// 解析格式和服務端對齊就行，123、456、789都是瞎寫的const buf = binary.slice(123, 456);let view = new DataView(buf.buffer, 0);const msgId = +view.getBigUint64(0, false).toString();// 根據msgId獲取msgClassif (msgClass) {const bodyBuf = binary.slice(789);const msg = msgClass.decode(bodyBuf);console.log('onMessage', msg);// 調用對應回調處理消息} else {console.log('onMessage no map class', msgId);}
}
參考：
  1. websocket進行Authorization驗證_websocket authorization-CSDN博客
  2. 前端在WebSocket中加入Token_websocket添加請求頭token-CSDN博客
  3. javascript - WebSocket connection failed: Error during WebSocket handshake: Unexpected response code: 400 - Stack Overflow
  4. Essential guide to WebSocket authentication
  5. 8 best WebSocket libraries for Node
  6. 在Javascript中將Uint8Array轉換為BigInt-騰訊云開發者社區-騰訊云
  7. websocket創建時附加額外信息 [如自定義headers信息(利用nginx)]_websocket自定義header-CSDN博客
  8. 前端如何在 WebSocket 的請求頭中使用標準 HTTP 頭攜帶 Authorization 信息,添加請求頭_websocket添加請求頭-CSDN博客
  9. JS/TS項目中使用websocket與protobuf_ts protobuf-CSDN博客
  10. TS項目中使用Protobuf的解決方案_protobuf ts-CSDN博客
  11. cocos creator使用protobuf詳細方案 - Creator 3.x - Cocos中文社區
  12. cocos creator使用protobuf詳細方案 - Creator 3.x - Cocos中文社區
  13. WebSocket 客戶端 | Cocos Creator
  14. cocos-test-projects/assets/cases/network/NetworkCtrl.ts at 07f5671e18ef3ed4494d8cba6c2f9499766467a6 · cocos/cocos-test-projects · GitHub
  15. CocosCreator中加入webSocket的使用 - Creator 2.x - Cocos中文社區
  16. Cocos Creator3.8 項目實戰（十）使用 protobuf詳細教程_cocoscreator protobuf-CSDN博客
  17. 在cocos creator TS 中如何使用protobuf(自動化，評論中有)_cocoscreator ts 面試-CSDN博客
  18. cocos creator中webSocket的使用及封裝_cocos onfire-CSDN博客
  19. [CocosCreator]封裝WebSocket網絡管理器(包含心跳)_cocoscreater socket.io 設置心跳和超時-CSDN博客
  20. https://zhuanlan.zhihu.com/p/653165384
  21. https://zhuanlan.zhihu.com/p/616718383
  22. javascript uint8數組和uint32之間的轉換_arcgis unit8轉化為unit32-CSDN博客
  23. node.js - How can I fix compile time errors even using compiler options as target es6 and es2017 in Angular 7? - Stack Overflow
  24. WebSocket 的請求頭(header)中如何攜帶 authorization
  25. https://peterolson.github.io/BigInteger.js/BigInteger.min.js
  26. https://github.com/yume-chan/dataview-bigint-polyfill
  27. https://github.com/peterolson/BigInteger.js
  28. CocosCreator與大整數運算庫_ts 游戲中大數值怎么計算-CSDN博客
  29. 【分享】自定義arraybuffer數據結構 - Creator 2.x - Cocos中文社區
  30. DataView - JavaScript | MDN
  31. ES6，Number類型和新增的BigInt數據類型，以及數值精度丟失的問題_es6除號-CSDN博客
  32. CocosCreator 源碼./polyfill/array-buffer詳解 - 簡書
  33. [ts]typescript高階之typeof使用_ts typeof-CSDN博客
  34. TypeScript 【type】關鍵字的進階使用方式_typescript type使用-CSDN博客
  35. 記錄JS XMLHttpRequest POST提交JSON數據的格式_xmlrequest post json-CSDN博客
  36. JS使用XMLHttpRequest對象POST收發JSON格式數據_js發送json-CSDN博客
  37. https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/36912.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/36912.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/36912.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

2024年6月大眾點評深圳餐飲店鋪POI分析18萬家

2024年6月大眾點評深圳餐飲店鋪POI分析18萬家

2024年6月大眾點評深圳餐飲店鋪POI共有178720家 店鋪POI點位示例： 店鋪id G9TSD2JvdLtA7fdm 店鋪名稱 江味龍蝦館(南山店) 十分制服務評分 8.8 十分制環境評分 8.8 十分制劃算評分 8.6 人均價格 128 評價數量 12840 店鋪地址 南山大道與桂廟路交叉口西北角…
閱讀更多...
微信小程序 點擊左上角返回彈窗提示

微信小程序 點擊左上角返回彈窗提示

業務需求：當頁面表單沒有提交直接返回時，要提示用戶是否保存當前信息，如果已經提交就不提示了。 由于微信小程序是無法監聽右上角按鈕返回事件。 所以就換個思路 小程序提供了如下兩個Api wx.enableAlertBeforeUnload(Object object)&…
閱讀更多...
Python入門-基礎知識-編程規范

Python入門-基礎知識-編程規范

1.縮進 在編程語言中，代碼之間往往存在著一定的邏輯關系和層次關系。C語言和Java語言等 用“{}”分隔代碼塊，而Python用的是縮進和冒號。Python代碼的縮進可以使用空格鍵或 Tab鍵來實現，通常情況下以4個空格或1個制表符作為1個縮進量。Pytho…
閱讀更多...
TCP協議中的三次握手和四次揮手機制

TCP協議中的三次握手和四次揮手機制

TCP協議中的三次握手和四次揮手機制 TCP（Transmission Control Protocol，傳輸控制協議）是一種面向連接的、可靠的、基于字節流的通信協議，它的三次握手和四次揮手機制是建立和斷開連接的關鍵步驟。 三次握手： 第一次…
閱讀更多...
等保測評與網絡安全法規的關聯：構建信息安全的法律與技術雙重保障

等保測評與網絡安全法規的關聯：構建信息安全的法律與技術雙重保障

在信息化高速發展的今天，網絡安全已經成為國家安全、社會穩定和經濟發展的重要基石。為了保障網絡空間的安全和穩定，我國制定了一系列網絡安全法規，其中最為關鍵的就是《中華人民共和國網絡安全法》。與此同時，等保測評&#xff0…
閱讀更多...
第 2 章SwiftUI 入門及文本操作

第 2 章SwiftUI 入門及文本操作

如果你之前使用過 UIKit，你會發現TextSwiftUI 中的控件與 UIKit 中的非常相似UILabel。它是一個允許你顯示一行或多行文本的視圖。此Text控件不可編輯，但可用于在屏幕上顯示只讀信息。例如，如果你想顯示一條屏幕消息，你可以使用它Text來實現它。 在本章中，我們將向您展示…
閱讀更多...
RAG開發中常見的12個痛點及解決方案

RAG開發中常見的12個痛點及解決方案

受到 Barnett 等人論文《構建檢索增強生成系統的七大挑戰》啟發，本文將探討論文中提及的七大挑戰及在開發 RAG（檢索增強生成）流程中常遇到的五個額外難題。更為重要的是，我們將深入討論解決這些 RAG 難題的策略，以便我…
閱讀更多...
使用 WebGL 創建 3D 對象

使用 WebGL 創建 3D 對象

WebGL Demohttps://mdn.github.io/dom-examples/webgl-examples/tutorial/sample5/index.html 現在讓我們給之前的正方形添加五個面從而可以創建一個三維的立方體。最簡單的方式就是通過調用方法 gl.drawElements() 使用頂點數組列表來替換之前的通過方法gl.drawArrays() 直接…
閱讀更多...
TinTin Web3 動態精選：Aptos Builder Jam 亞洲首站即將開啟，Solana 實現全網連接

TinTin Web3 動態精選：Aptos Builder Jam 亞洲首站即將開啟，Solana 實現全網連接

TinTin 快訊由 TinTinLand 開發者技術社區打造，旨在為開發者提供最新的 Web3 新聞、市場時訊和技術更新。TinTin 快訊將以周為單位， 匯集當周內的行業熱點并以快訊的形式排列成文。掌握一手的技術資訊和市場動態，將有助于 TinTinLand 社區的開…
閱讀更多...
檢測SD NAND文件系統異常和修復的方法

檢測SD NAND文件系統異常和修復的方法

目錄 1、打開命令提示符： 2、運行chkdsk命令： 3、命令參數說明： chkdsk是Windows中的一個命令行工具，用于檢查磁盤上的文件系統錯誤和修復壞塊。MK米客方德為您提供指導，以下是使用chkdsk的步驟： 1、打開…
閱讀更多...
綜合IT運維管理解決方案

綜合IT運維管理解決方案

綜合IT運維管理解決方案 在信息化和數字化高速發展的時代，企業的IT運維管理已經成為保障業務連續性和提升運營效率的關鍵環節。高效的IT運維管理不僅能夠降低運維成本，還能提升服務質量和用戶滿意度。本文將詳細介紹綜合IT運維管理解決方案，…
閱讀更多...
富格林：正規平臺曝光出金招數

富格林：正規平臺曝光出金招數

富格林悉知，在現貨黃金中，正規盈利出金是要建立在無落入誘導風險的情況下實現的，投資者要關注的不僅僅是如何進行盈利，還要掌握正規平臺曝光的交易技巧或經驗。對于新手投資者來說，學習投資的基礎知識，提升…
閱讀更多...
eBPF技術揭秘：DeepFlow如何引領故障排查，提升運維效率

eBPF技術揭秘：DeepFlow如何引領故障排查，提升運維效率

DeepFlow 實戰：eBPF 技術如何提升故障排查效率 目錄 DeepFlow 實戰：eBPF 技術如何提升故障排查效率 微服務架構系統中各個服務、組件及其相互關系的全景 零侵擾分布式追蹤（Distributed Tracing）的架構和工作流程 關于零侵擾持…
閱讀更多...
華為od 2024 | 什么是華為od，od 薪資待遇，od機試題清單

華為od 2024 | 什么是華為od，od 薪資待遇，od機試題清單

目錄 專欄導讀華為OD機試算法題太多了，知識點繁雜，如何刷題更有效率呢？ 一、邏輯分析二、數據結構1、線性表① 數組② 雙指針 2、map與list3、隊列4、鏈表5、棧6、滑動窗口7、二叉樹8、并查集9、矩陣 三、算法1、基礎算法① 貪心思維② 二分查…
閱讀更多...
后端系統的安全性

后端系統的安全性

后端系統的安全性 后端系統的安全性是任何Web應用或服務的核心組成部分，它涉及保護數據、用戶隱私以及系統免受惡意攻擊。以下是后端安全的一些關鍵點： 認證和授權：確保只有經過身份驗證的用戶才能訪問特定資源。這通常包括使用用戶名/密碼…
閱讀更多...
Spring Session將HttpSession保存到Redis中，實現重啟應用會話不丟失

Spring Session將HttpSession保存到Redis中，實現重啟應用會話不丟失

這篇文章介紹一下在springboot項目中整合Spring Session，將session會話信息保存到Redis中，防止重啟應用導致會話丟失。 第一步 創建一個springboot項目，添加spring-session-redis的依賴，因為要用到reids，所以要把redi…
閱讀更多...
擴散模型中的UNET

擴散模型中的UNET

目錄 一、為什么UNET模型可以用于去噪網絡二、擴散模型中的UNET是一個條件去噪網絡，怎么實現的三、UNET用于分割和用去去噪的區別 一、為什么UNET模型可以用于去噪網絡 下采樣部分: 能夠提取圖像的深層次特征，這些特征往往包含圖像的重要結構和信息&…
閱讀更多...
Python 繼承：理解與應用

Python 繼承：理解與應用

Python中的繼承是面向對象編程中重要的概念之一，允許一個類（子類）從另一個類（父類）繼承屬性和方法。這種機制不僅能提高代碼的重用性，還有助于構建層次化的數據模型，簡化復雜系統的設計與維護。…
閱讀更多...
原型開發：加速需求驗證與設計優化

原型開發：加速需求驗證與設計優化

目錄 前言1. 原型開發的意義1.1 定義與概述1.2 原型的類型 2. 原型開發的優勢2.1 明確需求2.2 提升用戶滿意度2.3 降低開發風險 3. 原型開發的挑戰3.1 過多的原型開發3.2 資源投入與管理3.3 期望管理 4. 優化原型開發流程4.1 明確目標與范圍4.2 選擇合適的工具和方法4.3 加強用…
閱讀更多...
【MySQL基礎篇】概述及SQL指令：DDL及DML

【MySQL基礎篇】概述及SQL指令：DDL及DML

數據庫是一個按照數據結構來組織、存儲和管理數據的倉庫。以下是對數據庫概念的詳細解釋：定義與基本概念： 數據庫是長期存儲在計算機內的、有組織的、可共享的、統一管理的大量數據的集合。 數據庫不僅僅是數據的簡單堆積，而是遵循一定的規則…
閱讀更多...
最新文章

Copyright @ 2022~2023