注册 登录
主题 : CocosCreator + socketIO简易教程(更新至1.0)
级别: 侠客
UID: 503086
精华: 11
发帖: 140
可可豆: 830 CB
威望: 625 点
在线时间: 275(时)
注册时间: 2015-09-05
最后登录: 2018-12-02
0 楼:  发表于: 2016-01-26 00:57    发自: Web Page

CocosCreator + socketIO简易教程(更新至1.0)   

管理提醒: 本帖被 nantas 执行提前操作(2016-01-26)
->前往教程司令部
New: 教程司令部已经更新了教程 往后不再使用链式的教程结构

这篇教程希望能够让大家用node.js的socketIO包  快速上手游戏中前台和后台的交互

我们从已经安装了CocosCreator 懂得建立HelloWorld项目
有前台与后台交互基本思想 但是完全不知道node.js是啥 的前提开始讲

提醒 : 如果在按照这个流程学习的过程中 有任何的bug 请在该帖子下回复  因为写帖子和敲代码还是两回事 可能有一些和描述上不一样的地方

首先下载并安装 node.js  node.js
MAC OS : (为什么放网盘里面呢 鬼知道你看到这篇帖子的时候 api都换了几代了)node.js_for_mac

双击安装 不断下一步就OK了

完成后安装目录如图


在Dos下  (windows 为 win + R  -> cmd)
输入node 后显示箭头 > 则安装完成

后面安装web框架Express  (如果npm不能安装  请看最后面网盘目录下打包的node_module 解压后 放到node.js安装目录下node_module下即可 然后直接看后面的路径配置)

在上图安装目录下 按住shift + 鼠标右键 -> 在此处打开命令行
输入 npm install --save express
稍等几秒后就会安装完成

后面安装webSocket包装框架SocketIO

在上图安装目录下 按住shift + 鼠标右键 -> 在此处打开命令行
输入 npm install --save socket.io
稍等几秒后就会安装完成



然后配置一下包路径

NODE_PATH : F:\Node.js\Root\node_modules  (这个是我的Node.js安装路径下node_module文件夹的路径  你应当指到自己电脑上node.js安装路径下node_module文件夹)

添上这一句之后  后面代码里面的require('express') / require('socket.io'); 才知道  
要在NODE_PATH指定的文件夹下面去找包
和 import JAVA 是一个道理 需要配置CLASS_PATH




到这里node.js后台的配置工作就完成了

现在来尝试一下写一个极简的后台代码  说白了 也就是 javascript代码

node.js编程的一个思想就是模块的组合  就和搭积木一样
要用什么就伸手要什么(require),
想叫别人做什么就大声喊出来(socket.emit('告诉一个人')或socket.broadcast.emit('告诉全部人')),
听到的人就会去做事情了(socket.on('听到了',function('你给我的这个啥玩意'){ 做事情}));




后面再server.js目录下 依旧shift + 鼠标右键 ->在此处打开命令行
输入node server.js
(可以输入node 然后按Tab 自动补全)
运行 效果如图


至此 一个简单的服务器就搭建完成了


好了 那个黑框框(dos)先留着 不要关掉 我们等会继续用  

然后下载客户端的socket.io.js文件 用于在前端访问socket.io socket.io.js

然后修改socket.io.js 代码 在源码的最*****做一个if包装(发布到Native平台时需要做到这一步)


现在来写个cocos前端代码

首先创建一个HelloWorld项目吧

这个就不多说明了

然后 在资源管理器下新建一个文件夹script


然后在电脑目录中 找到HelloWorld项目的script文件夹 将我们之前下的socket.io.js扔到里面



上面一个框框是项目目录  下面是socket.io.js文件

然后回到cocoscreator中 就能看到在script文件夹下有socket.io 了

后面我们开始写连接后台的前端脚本吧

在script文件下右键->新建->javascript (最好重命名一下 我的为myapp)

然后在onload函数下 写如下代码



好啦 到这里 前台的代码也写完啦

还有一点点收尾工作

首先 选中层级管理器中的 canvas
将资源管理器中的myapp.js拉到右边的属性管理器上 扔下去



首先 继续选中层级管理器中的 canvas
将层级管理器中的label拉到右边的属性管理器上myapp.js组件的Label框上 扔下去


好啦 我们现在可以运行来看一下啦

首先确定 之前的黑框框还在吧 不然就再开一次吧  

进到server.js 目录下 shift +鼠标右键 ->在此处打开命令行
输入node server.js  开启后台

然后运行HelloWorld项目



好啦  大概就是这样子啦  

有什么不清楚的可以在cocosCreator13群中问我们啦 企鹅群: 428196107

另外: socket.io.js的下载链接 可以通过访问 http://socket.io/download/
点击下方socket.io-client 链接到github中


然后点击右中上位置DownloadZIP 然后解压就能找到socket.io.js啦



还有  注意到server.js 中这句话
app.use(express.static(__dirname + '/public'));
添加了这句之后 就可以在下面放各种html啥啥的
就可以访问本地html了




好啦  到这里 我们已经具备了前台和后台交互的基本能力

后续会推出 后台与mysql数据库交互的简易操作教程

附录有代码 和工具 如果 网盘给抽了可以在这里下  百度到官网下也可以

SocketIOsample.zip (2 K) 下载次数:569 socket.io-client-master.zip (71 K) 下载次数:589   

考虑到npm可能连不上的问题  我将我这边的node_module打包放网盘了node_module
里面有express(web框架) npm(包管理) socket.io(websocket包装) mysql(mysql驱动) underscore(扩展工具库)

2016-02-25

上面的范例在CCC中进行浏览器调试是没有问题的

但是如果发布到其他平台的时候  需要对myapp.js提前做下面改动



2016-03-30




->前往教程司令部
下一篇:CocosCreator + SocketIO + MySQL 简易教程
[ 此帖被linhaiwei123在2016-03-30 23:50重新编辑 ]

清空我的评分动态本帖最近评分记录: 共2条评分记录
jare 可可豆 +10 2016-01-26 原创内容
nantas 可可豆 +10 2016-01-26 -
隐藏评分记录
级别: *
UID: 215153
精华: *
发帖: *
可可豆: * CB
威望: * 点
在线时间: (时)
注册时间: *
最后登录: *
1 楼:  发表于: 2016-01-26 09:33    发自: Web Page
没有windows,只有Mac。。。
级别: 精灵王
UID: 55341
精华: 0
发帖: 556
可可豆: 4724 CB
威望: 4714 点
在线时间: 73(时)
注册时间: 2011-03-07
最后登录: 2017-04-21
2 楼:  发表于: 2016-01-26 09:38    发自: Web Page
请收下我的膝盖~~
级别: 骑士
UID: 412843
精华: 0
发帖: 260
可可豆: 499 CB
威望: 467 点
在线时间: 155(时)
注册时间: 2014-12-10
最后登录: 2016-04-01
3 楼:  发表于: 2016-01-26 10:00    发自: Web Page
非常好的教程,感谢楼主分享,
国内连NPM是非常坑爹的,特别是我们公司,还给屏蔽了。。。


所有我去express的github,想直接下载源码拷贝安装。。。结果




楼主你们能不能把你的express模块共享出来

图片:QQ图片20160126095633.png
图片:QQ图片20160126095932.png
EasyBox2D For Creator :

http://jeason1997.github.io/EasyBox2D
级别: 侠客
状态: 连续签到 - [2天]
UID: 528913
精华: 0
发帖: 78
可可豆: 139 CB
威望: 130 点
在线时间: 79(时)
注册时间: 2015-12-04
最后登录: 2016-03-15
4 楼:  发表于: 2016-01-26 11:33    发自: Web Page
厉害厉害,很容易懂。不过npm被墙了怎么办
级别: 侠客
UID: 503086
精华: 11
发帖: 140
可可豆: 830 CB
威望: 625 点
在线时间: 275(时)
注册时间: 2015-09-05
最后登录: 2018-12-02
5 楼:  发表于: 2016-01-26 13:26    发自: Web Page
回 3楼(jeason1997) 的帖子
已经将包放到网盘了  不知道是不是这样分享包 = = 毕竟我node.js就上手没几天
级别: 侠客
UID: 503086
精华: 11
发帖: 140
可可豆: 830 CB
威望: 625 点
在线时间: 275(时)
注册时间: 2015-09-05
最后登录: 2018-12-02
6 楼:  发表于: 2016-01-26 13:26    发自: Web Page
回 4楼(fjzjk) 的帖子
放网盘里面了
级别: 侠客
UID: 342119
精华: 0
发帖: 100
可可豆: 307 CB
威望: 307 点
在线时间: 245(时)
注册时间: 2014-07-11
最后登录: 2016-03-04
7 楼:  发表于: 2016-01-26 15:35    发自: Web Page
回 3楼(jeason1997) 的帖子
可以用cnpm
级别: 版主
UID: 7757
精华: 1
发帖: 183
可可豆: 221 CB
威望: 221 点
在线时间: 125(时)
注册时间: 2009-08-11
最后登录: 2016-04-04
8 楼:  发表于: 2016-01-26 16:44    发自: Web Page
回 楼主(linhaiwei123) 的帖子
我来自己填个坑,麻烦楼主 @linhaiwei123 更新到帖子里面。

刚刚下午和开发者测试发现,用这种方式 JSB 中还是有问题,需要做额外的工作。

if (!cc.sys.isNative) {
    window.io = SocketIO
}
else {
    require('socket.io');
}


这样写还不够。

还需要修改 socket.io.js,在 socket.io.js 中添加如下代码:

if (!cc.sys.isNative) {

// SocketIO 原始代码

}


这样就可以了,主要原因是 SocketIO 的 Web 版本在 JSB 中解析会出错,但是 browserify 不支持条件编译,所以打包过程中总是会包含 SocketIO 的代码。

在未来版本中,我们会提供更科学的管理依赖的方法来解决这个问题。
级别: 侠客
UID: 503086
精华: 11
发帖: 140
可可豆: 830 CB
威望: 625 点
在线时间: 275(时)
注册时间: 2015-09-05
最后登录: 2018-12-02
9 楼:  发表于: 2016-01-26 18:21    发自: Web Page
回 8楼(panda) 的帖子
已经更新 辛苦了

本站内容均为本站转发,已尽可能注明出处。因未能核实来源或转发内容图片有权利瑕疵的,请及时联系本站,本站会第一时间进行修改或删除。 QQ : 3442093904

描述
快速回复

关注本帖(如果有新回复会站内信通知您)

发帖、回帖都会得到可观的积分奖励。查看论坛积分规则

按"Ctrl+Enter"直接提交
    顶部