注册 登录
主题 : CocosCreator + socketIO简易教程(更新至1.0)
级别: 侠客
UID: 503086
精华: 11
发帖: 140
可可豆: 830 CB
威望: 625 点
在线时间: 275(时)
注册时间: 2015-09-05
最后登录: 2017-04-08
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) 下载次数:330 socket.io-client-master.zip (71 K) 下载次数:324   

考虑到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
最后登录: 2017-04-08
5 楼:  发表于: 2016-01-26 13:26    发自: Web Page
回 3楼(jeason1997) 的帖子
已经将包放到网盘了  不知道是不是这样分享包 = = 毕竟我node.js就上手没几天
级别: 侠客
UID: 503086
精华: 11
发帖: 140
可可豆: 830 CB
威望: 625 点
在线时间: 275(时)
注册时间: 2015-09-05
最后登录: 2017-04-08
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
最后登录: 2017-04-08
9 楼:  发表于: 2016-01-26 18:21    发自: Web Page
回 8楼(panda) 的帖子
已经更新 辛苦了
描述
快速回复

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

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

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