微信小遊戲-CocosCreator 基礎(二十七)
websocket 1: creator只支援websocket, h5的標準也只支援websocket; 2: websocket 底層是 tcp socket, 基於tcp socket上建立了連線,收發資料的標準,保證了使用者收到的資料和發到的資料是一致的,不用考慮粘包等問題,websocket協議已經解決了; 3: websocket的使用方式: 1>new WebSocket(url); 伺服器對應的url: “ws://127.0.0.1:6081/ws”, ip + port 2> 支援的資料: 文字資料型別與二進位制資料型別; sock.binaryType = "arraybuffer"/”Blob”; 支援arraybuffer和Blob型別,一般配置成arraybuffer,根據伺服器而定; 3>配置好websocket的回掉函式: onopen(event), onmessage(event), onclose(event), onerror(event), 4>不用了關閉socket或收到伺服器關閉遇到錯誤: close方法; socketIO 1: socket.io是基於 TCP socket/Websocket封裝的 上層的一個框架; 2: 使得人們能方便的使用類似事件的模式來處理網路資料包; 3: creator 搭建socket.io注意: 1>jsb裡面原生實現了SocketIO; 2>h5 使用js的實現socket-io.js; // 下載標準的socket.io.js,然後修改過濾掉原生平臺的; 4: socket.io的使用: 注意前後端的版本一定要對上,使用版本要匹配,這裡是前端版本 1> connect: var opts = { 'reconnection':false, 'force new connection': true, 'transports':['websocket', 'polling'] } this.sio = window.io.connect(this.ip,opts); 2>系統事件: connect/disconnect, connect_failed, 3> 自定義事件: 4> 關閉 this.sio.disconnect(); =============================================================================== websocket: var websocket = { sock: null, // 連線的socket 物件 WebSocket, h5標準物件;
// 網路連線成功了以後呼叫 on_open: function(event) { // test this.send_data("HelloWorld"); // end },
// 客戶端收到資料的時候 on_message: function(event) { console.log("#####", event.data); },
// 客戶端收到socket 關閉的時間的時候呼叫; on_close: function (event) { this.close(); },
on_error: function (event) { this.close(); },
close: function() { if (this.sock != null) { this.sock.close(); // 關閉socket this.sock = null; } },
// 連線函式, connect: function(url) { this.sock = new WebSocket(url); // h5標準的websocket物件 this.sock.binaryType = "arraybuffer"; // 配置接受二進位制的資料型別,與伺服器保持一次, "Blob"
// 為這個websocket物件制定對應的回掉函式; this.sock.onopen = this.on_open.bind(this); this.sock.onmessage = this.on_message.bind(this); this.sock.onclose = this.on_close.bind(this); this.sock.onerror = this.on_error.bind(this); },
// 傳送資料, sock.send; send_data: function(data) { this.sock.send(data); }, };
module.exports = websocket; ======================================================================= net:封裝socketIO socket_ioJS :https://download.csdn.net/download/qq_29019031/10701476 if(window.io == null){ // h5 window.io = require("socket-io"); }
var net = { sio: null, connect:function(url) { var self = this; var opts = { 'reconnection':true, 'force new connection': true, 'transports':['websocket', 'polling'] }
this.sio = window.io.connect(url, opts);
// 監聽地城的系統事件 this.sio.on('reconnect',function(){ console.log('reconnection'); });
// 連線成功 this.sio.on('connect',function(data){ self.sio.connected = true;
console.log("%%%%%%%%%%%%% connect"); // 事件 + 資料名字 self.send("your_echo", "HelloWorld"); });
// 斷開連線 this.sio.on('disconnect',function(data){ console.log("MMMMMdisconnect"); self.sio.connected = false; // self.close(); }); // 連線失敗 this.sio.on('connect_failed',function (){ console.log('connect_failed'); }); // 自己定義,如果你向要收那種事件的資料,你就監聽這個事件 this.sio.on('your_echo',function(data){ console.log("your_echo", data); }); },
// 傳送資料: 事件+資料的模型; send:function(event,data){ if(this.sio.connected){ this.sio.emit(event,data); // 觸發一個網路事件,名字 + 資料body ---> 伺服器; } },
// 關閉socket close:function(){ if(this.sio && this.sio.connected){ this.sio.connected = false; this.sio.disconnect(); // API this.sio = null; } }, };
module.exports = net;
===================================================================== 呼叫: var websocket = require("websocket"); var net = require("net");
cc.Class({ extends: cc.Component,
properties: { // foo: { // default: null, // The default value will be used only when the component attaching // to a node for the first time // url: cc.Texture2D, // optional, default is typeof default // serializable: true, // optional, default is true // visible: true, // optional, default is true // displayName: 'Foo', // optional // readonly: false, // optional, default is false // }, // ... },
// use this for initialization onLoad: function () { net.connect("127.0.0.1:6081"); // websocket.connect("ws://127.0.0.1:6080/ws"); },
// called every frame, uncomment this function to activate update callback // update: function (dt) {
// }, }); =============================== echo伺服器: var ws = require("ws"); var server = new ws.Server({ // host: ip, // 如果加了host,外部連結不上 port: 6080, });
console.log("#######"); function on_server_client_comming(session) { session.on("close", function() { });
// error事件 session.on("error", function(err) { }); // end
session.on("message", function(data) { console.log("######", data);
session.send(data); }); } server.on("connection", on_server_client_comming);
var socket_io = require('socket.io') var sio = socket_io(6081);
sio.sockets.on('connection',function(socket){ console.log("connect called");
// 自定義事件 socket.on("your_echo", function (data) { console.log("your_echo", data);
socket.emit("your_echo", data); }); // end
// 系統事件 socket.on('disconnect',function(data){ console.log("disconnect"); });
});