Cocos Creator 使用protobufjs

Win7 + Creator 2.0.0 + protobufjs 6.8.8

1.下载安装protobufjs

npm install -g protobufjs

可以看到protobufjs安装在C:\Users\Administrator\AppData\Roaming\npm\node_modules\protobufjs中

2.在protobufjs\dist中找到protobuf.js文件,并作为插件拖放到Creator中(注意,必须作为插件,并且是四个选项都必须选中,否则将报错!)

3.新建一个通讯协议文件msg.proto,内容如下

syntax = "proto3";

package msg;

message Login {
    string name = 1;
    string pwd = 2;
}

注意:package为包名msg

4.使用如下命令将msg.proto文件转为对应的js版本文件Msg.js

::protobuf.js版本6.x生成js文件
pbjs -t static-module -w commonjs -o Msg.js msg.proto 

5.修改Msg.js文件对应内容

//var $protobuf = require("protobufjs/minimal"); //将源文件中的这一行屏蔽,然后新增下面一行
var $protobuf = protobuf;

6.将Msg.js拖放到Creator中(包含Msg.js和protobuf.js文件的结构如下)

7.写一个WebSocket的处理脚本挂载到场景中即可。

import {msg} from "./Msg"  //这里引入文件

cc.Class({
    extends: cc.Component,

    properties: {
        ip: {
            default: "",
            type: cc.string
        },

        port: {
            default: 0,
            type: cc.number
        }
    },

    ctor: function () {
        this.ws = null;
    },

    onLoad: function () {
        var self = this;

        var ipPort = "ws://" + this.ip + ":" + this.port;
        console.log(ipPort);

        this.ws = new WebSocket(ipPort);
        this.ws.binaryType = ‘arraybuffer‘; //这里设置为发送二进制数据

        this.ws.onopen = function (event) {
            console.log("open");

            //打开成功立刻进行发送
            if (self.ws.readyState === WebSocket.OPEN) {
                let message = msg.Login.create({name: "hello", pwd: "pwd"});//构造对象
                let messageBuf = msg.Login.encode(message).finish(); //获取二进制数据,一定要注意使用finish函数

                self.ws.send(messageBuf); //发送二进制数据
            }
        };

        this.ws.onmessage = function (event) {
            console.log("onmessage : " + event.data);
        };

        this.ws.onerror = function (event) {
            console.log("on error :", event.data);
        };

        this.ws.onclose = function (event) {
            console.log("onclose");
        };
    }
});

参考传送:《cocosCreator中Protobuf的简单使用

以上。

原文地址:https://www.cnblogs.com/chevin/p/9515097.html

时间: 2024-08-30 15:20:14

Cocos Creator 使用protobufjs的相关文章

在 Cocos Creator 中使用 Protobufjs(一)

一. 环境准备 我一直在探索Cocos H5正确的开发姿势,目前做javascript项目已经离不开 nodejs.npm或grunt等脚手架工具了. 1.初始化package.json文件 npm init 当新建好cocos-js或creator项目,在项目根目录使用npm init命令,一路回车,将在当前目录创建package.json文件用于nodejs三方模块的管理.关于npm的使用细节网络上有很多教程,在此不用细说. 2. protobufjs模块 本人最早在cocos2dx 2.x

cocos Creator js 房卡麻将/血战/H5四川麻将源码下载搭建

房卡麻将/血战/H5四川麻将 源码 支持iOS/Android/H5 完整源码 1.基于NODEJS+MYSQL的服务器,成熟的技术方案,高效稳定,且方便Windows开发,Linux平台布署,节约服务器运转成本. 2.采用最新版本的cocos引擎,cocos creator开发,可快速的进行界面调整.且能够快速地发布iOS,Android版本. 3.如需H5版本,只需针对H5平台进行资源优化即可. 4.成熟可靠的房卡式设计,能满足大部分用户使用体验. 5.产品经过大量测试,可以运转稳定. 测试

cocos creator随笔

接触一个月cocos creator做个笔记... 1.socket.io 封装了websocket , Ajax等,故任何浏览器都可以使用socket.io建立异步连接.websocket 双向需要握手建立连接,http 单向. 短连接:一次性交换数据,如登入,创建角色等  长连接:推送 (一) socket.emit('tell one person'); socket.broadcast.emit('tell to everyone'); socket.on('I heard',funct

【COCOS CREATOR 系列教程之四】基于0.7.1先简单制作一个PAGEVIEW

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/cocos-creator/1999.html 由于当前版本还没有发布1.0,因此还有不少组件没有发布,那么Himi也看到Cocos Creator群里有几个童鞋问起过PageView的问题,那么Himi正好借此练手,基于当前版本制作一个PageView. 本文分为两部分进行讲解: 1. 制作PageView     2. 如何使用 一. 制作

【COCOS CREATOR 系列教程之二】脚本开发篇&事件监听、常用函数等示例整合

[Cocos Creator ](千人群):  432818031 上一篇,介绍了Himi在使用过cc所有组件后的一篇总结,没有具体介绍每个组件的原因在于官方文档很齐全,而且也有视频的介绍. 所以希望童鞋们可以把我这两篇博文当成对组件.脚本两部分开发的整理与总结. 后续的文章,Himi应该主要更新一些官方还未补充或者还没有的教程.避免无用功. 下面直接放出代码,因为不是很难理解.所以不再一一赘述,都是常用的函数.事件监听.动作回调.定时器等开发过程中必接触的. 大致内容如下: cc 属性介绍 获

Cocos Creator—如何给资源打MD5版本号

Cocos Creator 是Cocos最新一代的游戏开发者工具,基于 Cocos2d-x,组件化,脚本化,数据驱动,跨平台发布.Cocos Creator的开发思路已经逐步跟Unity 3D靠拢,写起来也更方便快捷,开发效率更高. 但既然是新东西,免不了各种坑.其中在发布Web Mobile平台上,就有各种小问题,例如给资源加上md5版本号,Cocos Creator就不支持.从16年底开发组就说要支持MD5 Cache,等了大半年,新的1.6内测版本终于增加了MD5 Cache的功能,但效果

Cocos Creator—定制H5游戏首页loading界面

Cocos Creator从1.0版本发布到现在也有一年多了,按理说一些常见的问题网上都有解决方案,例如"如何自定义首页加载进度条界面"这种普遍需求,应该所有人都会遇到的,因此也有完善的解决方案才对.我在网上搜了一些文章,虽然也有讨论的帖子,但是方案都不尽人意.因此只能再次自己动手丰衣足食了,在此我总结一下我的思路和策略,分享给大家,希望后来的人少走弯路,另外这里的方案只针对H5游戏发布,其他平台可以借鉴思路自己实现. 首页加载的loading界面,官网的文档并没有提及,我是通过构建发

Cocos Creator—优化首页打开速度

Cocos Creator是一个优秀的游戏引擎开发工具,很多地方都针对H5游戏做了专门的优化,这是我比较喜欢Cocos Creator的一点原因. 其中一个优化点是首页的加载速度,开发组为了加快首页的渲染速度,减少白屏时间,把逻辑代码和首页加载代码做了彻底分离.首次页面加载的只是一个相当于加载器的初始化文件,文件体积特别小,不像某些引擎,一开始就需要加载主逻辑js文件,一开始就给我来个上百kb的文件加载,然后才能显示loading条,白屏时间当然会延长不少. 说到这里,不得不吐槽一下Cocos的

cocos creator动画编辑器学习

动画是一个渐变的过程,怎么样在cocos creator的动画编辑器中实现这个过程. 一.层级关系: 1节点.2动画(Animation).3动画剪辑(Animation Clip).4属性轨道.5动画帧 a.  动画(Animation)是节点上的一个组件. b.  动画剪辑(Animation Clip)就是一份动画的声明数据,将它挂载到动画(Animation)上作为一个属性进行设置. c.  动画剪辑(Animation Clip)上可添加多个属性轨道来控制不同属性. d.  在一条属性