CocosCreator + socketIO简易教程(更新至1.0)
2018-01-30 15:02
645 查看
我们从已经安装了CocosCreator 懂得建立HelloWorld项目
有前台与后台交互基本思想 但是完全不知道node.js是啥 的前提开始讲
提醒 : 如果在按照这个流程学习的过程中 有任何的bug 请在该帖子下回复 因为写帖子和敲代码还是两回事 可能有一些和描述上不一样的地方
首先下载并安装 node.js node.js
MAC OS : (为什么放网盘里面呢 鬼知道你看到这篇帖子的时候 api都换了几代了)node.js_for_mac
双击安装 不断下一步就OK了
完成后安装目录如图
![](https://img.alicdn.com/imgextra/i2/2294052962/TB2y48wkXXXXXXPXpXXXXXXXXXX_!!2294052962.png)
在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
稍等几秒后就会安装完成
![](https://img.alicdn.com/imgextra/i3/2294052962/TB2gaJckXXXXXcxXpXXXXXXXXXX_!!2294052962.png)
然后配置一下包路径
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
![](https://img.alicdn.com/imgextra/i4/2294052962/TB2eld1kXXXXXXjXXXXXXXXXXXX_!!2294052962.png)
到这里node.js后台的配置工作就完成了
现在来尝试一下写一个极简的后台代码 说白了 也就是 javascript代码
node.js编程的一个思想就是模块的组合 就和搭积木一样
要用什么就伸手要什么(require),
想叫别人做什么就大声喊出来(socket.emit('告诉一个人')或socket.broadcast.emit('告诉全部人')),
听到的人就会去做事情了(socket.on('听到了',function('你给我的这个啥玩意'){ 做事情}));
![](https://img.alicdn.com/imgextra/i2/2294052962/TB2bNtGkXXXXXbyXXXXXXXXXXXX_!!2294052962.png)
后面再server.js目录下 依旧shift + 鼠标右键 ->在此处打开命令行
输入node server.js
(可以输入node 然后按Tab 自动补全)
运行 效果如图
![](https://img.alicdn.com/imgextra/i3/2294052962/TB2KGRCkXXXXXcBXXXXXXXXXXXX_!!2294052962.png)
至此 一个简单的服务器就搭建完成了
好了 那个黑框框(dos)先留着 不要关掉 我们等会继续用
然后下载客户端的socket.io.js文件 用于在前端访问socket.io socket.io.js
然后修改socket.io.js 代码 在源码的最外围做一个if包装(发布到Native平台时需要做到这一步)
![](https://img.alicdn.com/imgextra/i2/2294052962/TB23SdfkXXXXXaWXpXXXXXXXXXX_!!2294052962.png)
现在来写个cocos前端代码
首先创建一个HelloWorld项目吧
这个就不多说明了
然后 在资源管理器下新建一个文件夹script
![](https://img.alicdn.com/imgextra/i4/2294052962/TB2DjZ1jVXXXXXWXFXXXXXXXXXX_!!2294052962.png)
然后在电脑目录中 找到HelloWorld项目的script文件夹 将我们之前下的socket.io.js扔到里面
![](https://img.alicdn.com/imgextra/i4/2294052962/TB2bXNbkXXXXXclXpXXXXXXXXXX_!!2294052962.png)
上面一个框框是项目目录 下面是socket.io.js文件
然后回到cocoscreator中 就能看到在script文件夹下有socket.io 了
![](https://img.alicdn.com/imgextra/i1/2294052962/TB2LF8mkXXXXXasXpXXXXXXXXXX_!!2294052962.png)
后面我们开始写连接后台的前端脚本吧
在script文件下右键->新建->javascript (最好重命名一下 我的为myapp)
然后在onload函数下 写如下代码
![](https://img.alicdn.com/imgextra/i1/2294052962/TB2.oRukXXXXXaaXpXXXXXXXXXX_!!2294052962.png)
好啦 到这里 前台的代码也写完啦
还有一点点收尾工作
首先 选中层级管理器中的 canvas
将资源管理器中的myapp.js拉到右边的属性管理器上 扔下去
![](https://img.alicdn.com/imgextra/i2/2294052962/TB2gJ8QkXXXXXasXXXXXXXXXXXX_!!2294052962.png)
首先 继续选中层级管理器中的 canvas
将层级管理器中的label拉到右边的属性管理器上myapp.js组件的Label框上 扔下去
![](https://img.alicdn.com/imgextra/i2/2294052962/TB24DFykXXXXXXBXpXXXXXXXXXX_!!2294052962.png)
好啦 我们现在可以运行来看一下啦
首先确定 之前的黑框框还在吧 不然就再开一次吧
进到server.js 目录下 shift +鼠标右键 ->在此处打开命令行
输入node server.js 开启后台
然后运行HelloWorld项目
![](https://img.alicdn.com/imgextra/i3/2294052962/TB2wNA5jVXXXXXAXFXXXXXXXXXX_!!2294052962.png)
好啦 大概就是这样子啦
有什么不清楚的可以在cocosCreator13群中问我们啦 企鹅群: 428196107
另外: socket.io.js的下载链接 可以通过访问 http://socket.io/download/
点击下方socket.io-client 链接到github中
![](https://img.alicdn.com/imgextra/i1/2294052962/TB2ev0pkXXXXXasXpXXXXXXXXXX_!!2294052962.png)
然后点击右中上位置DownloadZIP 然后解压就能找到socket.io.js啦
![](https://img.alicdn.com/imgextra/i3/2294052962/TB2MbXckXXXXXcDXpXXXXXXXXXX_!!2294052962.png)
还有 注意到server.js 中这句话
app.use(express.static(__dirname + '/public'));
添加了这句之后 就可以在下面放各种html啥啥的
就可以访问本地html了
![](https://img.alicdn.com/imgextra/i3/2294052962/TB2JxJFkXXXXXbLXXXXXXXXXXXX_!!2294052962.png)
![](https://img.alicdn.com/imgextra/i2/2294052962/TB2i7I_jVXXXXXnXFXXXXXXXXXX_!!2294052962.png)
![](https://img.alicdn.com/imgextra/i4/2294052962/TB2zSRTkXXXXXX3XXXXXXXXXXXX_!!2294052962.png)
好啦 到这里 我们已经具备了前台和后台交互的基本能力
后续会推出 后台与mysql数据库交互的简易操作教程
附录有代码 和工具 如果 网盘给抽了可以在这里下 百度到官网下也可以
![](http://www.cocoachina.com/bbs/images/wind2013/file/zip.gif)
SocketIOsample.zip (2
K) 下载次数:388
![](http://www.cocoachina.com/bbs/images/wind2013/file/zip.gif)
socket.io-client-master.zip (71
K) 下载次数:393
考虑到npm可能连不上的问题 我将我这边的node_module打包放网盘了node_module
里面有express(web框架) npm(包管理) socket.io(websocket包装) mysql(mysql驱动) underscore(扩展工具库)
2016-02-25
上面的范例在CCC中进行浏览器调试是没有问题的
但是如果发布到其他平台的时候 需要对myapp.js提前做下面改动
![](https://img.alicdn.com/imgextra/i4/2294052962/TB27_GbkFXXXXbQXXXXXXXXXXXX_!!2294052962.png)
2016-03-30
![](https://img.alicdn.com/imgextra/i4/2294052962/TB2hapymXXXXXczXpXXXXXXXXXX_!!2294052962.png)
文章出自:http://www.cocoachina.com/bbs/read.php?tid-458895-toread-1-page-1.html
有前台与后台交互基本思想 但是完全不知道node.js是啥 的前提开始讲
提醒 : 如果在按照这个流程学习的过程中 有任何的bug 请在该帖子下回复 因为写帖子和敲代码还是两回事 可能有一些和描述上不一样的地方
首先下载并安装 node.js node.js
MAC OS : (为什么放网盘里面呢 鬼知道你看到这篇帖子的时候 api都换了几代了)node.js_for_mac
双击安装 不断下一步就OK了
完成后安装目录如图
![](https://img.alicdn.com/imgextra/i2/2294052962/TB2y48wkXXXXXXPXpXXXXXXXXXX_!!2294052962.png)
在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
稍等几秒后就会安装完成
![](https://img.alicdn.com/imgextra/i3/2294052962/TB2gaJckXXXXXcxXpXXXXXXXXXX_!!2294052962.png)
然后配置一下包路径
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
![](https://img.alicdn.com/imgextra/i4/2294052962/TB2eld1kXXXXXXjXXXXXXXXXXXX_!!2294052962.png)
到这里node.js后台的配置工作就完成了
现在来尝试一下写一个极简的后台代码 说白了 也就是 javascript代码
node.js编程的一个思想就是模块的组合 就和搭积木一样
要用什么就伸手要什么(require),
想叫别人做什么就大声喊出来(socket.emit('告诉一个人')或socket.broadcast.emit('告诉全部人')),
听到的人就会去做事情了(socket.on('听到了',function('你给我的这个啥玩意'){ 做事情}));
![](https://img.alicdn.com/imgextra/i2/2294052962/TB2bNtGkXXXXXbyXXXXXXXXXXXX_!!2294052962.png)
后面再server.js目录下 依旧shift + 鼠标右键 ->在此处打开命令行
输入node server.js
(可以输入node 然后按Tab 自动补全)
运行 效果如图
![](https://img.alicdn.com/imgextra/i3/2294052962/TB2KGRCkXXXXXcBXXXXXXXXXXXX_!!2294052962.png)
至此 一个简单的服务器就搭建完成了
好了 那个黑框框(dos)先留着 不要关掉 我们等会继续用
然后下载客户端的socket.io.js文件 用于在前端访问socket.io socket.io.js
然后修改socket.io.js 代码 在源码的最外围做一个if包装(发布到Native平台时需要做到这一步)
![](https://img.alicdn.com/imgextra/i2/2294052962/TB23SdfkXXXXXaWXpXXXXXXXXXX_!!2294052962.png)
现在来写个cocos前端代码
首先创建一个HelloWorld项目吧
这个就不多说明了
然后 在资源管理器下新建一个文件夹script
![](https://img.alicdn.com/imgextra/i4/2294052962/TB2DjZ1jVXXXXXWXFXXXXXXXXXX_!!2294052962.png)
然后在电脑目录中 找到HelloWorld项目的script文件夹 将我们之前下的socket.io.js扔到里面
![](https://img.alicdn.com/imgextra/i4/2294052962/TB2bXNbkXXXXXclXpXXXXXXXXXX_!!2294052962.png)
上面一个框框是项目目录 下面是socket.io.js文件
然后回到cocoscreator中 就能看到在script文件夹下有socket.io 了
![](https://img.alicdn.com/imgextra/i1/2294052962/TB2LF8mkXXXXXasXpXXXXXXXXXX_!!2294052962.png)
后面我们开始写连接后台的前端脚本吧
在script文件下右键->新建->javascript (最好重命名一下 我的为myapp)
然后在onload函数下 写如下代码
![](https://img.alicdn.com/imgextra/i1/2294052962/TB2.oRukXXXXXaaXpXXXXXXXXXX_!!2294052962.png)
好啦 到这里 前台的代码也写完啦
还有一点点收尾工作
首先 选中层级管理器中的 canvas
将资源管理器中的myapp.js拉到右边的属性管理器上 扔下去
![](https://img.alicdn.com/imgextra/i2/2294052962/TB2gJ8QkXXXXXasXXXXXXXXXXXX_!!2294052962.png)
首先 继续选中层级管理器中的 canvas
将层级管理器中的label拉到右边的属性管理器上myapp.js组件的Label框上 扔下去
![](https://img.alicdn.com/imgextra/i2/2294052962/TB24DFykXXXXXXBXpXXXXXXXXXX_!!2294052962.png)
好啦 我们现在可以运行来看一下啦
首先确定 之前的黑框框还在吧 不然就再开一次吧
进到server.js 目录下 shift +鼠标右键 ->在此处打开命令行
输入node server.js 开启后台
然后运行HelloWorld项目
![](https://img.alicdn.com/imgextra/i3/2294052962/TB2wNA5jVXXXXXAXFXXXXXXXXXX_!!2294052962.png)
好啦 大概就是这样子啦
有什么不清楚的可以在cocosCreator13群中问我们啦 企鹅群: 428196107
另外: socket.io.js的下载链接 可以通过访问 http://socket.io/download/
点击下方socket.io-client 链接到github中
![](https://img.alicdn.com/imgextra/i1/2294052962/TB2ev0pkXXXXXasXpXXXXXXXXXX_!!2294052962.png)
然后点击右中上位置DownloadZIP 然后解压就能找到socket.io.js啦
![](https://img.alicdn.com/imgextra/i3/2294052962/TB2MbXckXXXXXcDXpXXXXXXXXXX_!!2294052962.png)
还有 注意到server.js 中这句话
app.use(express.static(__dirname + '/public'));
添加了这句之后 就可以在下面放各种html啥啥的
就可以访问本地html了
![](https://img.alicdn.com/imgextra/i3/2294052962/TB2JxJFkXXXXXbLXXXXXXXXXXXX_!!2294052962.png)
![](https://img.alicdn.com/imgextra/i2/2294052962/TB2i7I_jVXXXXXnXFXXXXXXXXXX_!!2294052962.png)
![](https://img.alicdn.com/imgextra/i4/2294052962/TB2zSRTkXXXXXX3XXXXXXXXXXXX_!!2294052962.png)
好啦 到这里 我们已经具备了前台和后台交互的基本能力
后续会推出 后台与mysql数据库交互的简易操作教程
附录有代码 和工具 如果 网盘给抽了可以在这里下 百度到官网下也可以
![](http://www.cocoachina.com/bbs/images/wind2013/file/zip.gif)
SocketIOsample.zip (2
K) 下载次数:388
![](http://www.cocoachina.com/bbs/images/wind2013/file/zip.gif)
socket.io-client-master.zip (71
K) 下载次数:393
考虑到npm可能连不上的问题 我将我这边的node_module打包放网盘了node_module
里面有express(web框架) npm(包管理) socket.io(websocket包装) mysql(mysql驱动) underscore(扩展工具库)
2016-02-25
上面的范例在CCC中进行浏览器调试是没有问题的
但是如果发布到其他平台的时候 需要对myapp.js提前做下面改动
![](https://img.alicdn.com/imgextra/i4/2294052962/TB27_GbkFXXXXbQXXXXXXXXXXXX_!!2294052962.png)
2016-03-30
![](https://img.alicdn.com/imgextra/i4/2294052962/TB2hapymXXXXXczXpXXXXXXXXXX_!!2294052962.png)
文章出自:http://www.cocoachina.com/bbs/read.php?tid-458895-toread-1-page-1.html
相关文章推荐
- CocosCreator + Animation + 查看API 简易教程(更新至1.0)
- CocosCreator + SocketIO + mysql
- 【基于Cocos Creator+Socket.io的联机对战黑白棋(2)】——匹配系统
- CocosCreator游戏开发---菜鸟学习之路(二)SocketIO简易教程
- 【基于Cocos Creator+Socket.io的联机对战黑白棋(3)】——心得若干
- CocosCreator + socketIO
- 【基于Cocos Creator+Socket.io的联机对战黑白棋(4)】——资源文件
- 【基于Cocos Creator+Socket.io的联机对战黑白棋(5)】——写在后面
- 【基于Cocos Creator+Socket.io的联机对战黑白棋(0)】——快期末了还不复习会不会挂科
- 【基于Cocos Creator+Socket.io的联机对战黑白棋(1)】——Socket.io简单入门
- socket.io简易教程(群聊,发送图片,分组,私聊)
- CocosCreator Http、WebSocket、SocketIO用法
- Cocos Creator socket.io打包Apk后无法连接
- 【Cocos Creator基础教程(组件篇)】——TiledMap(瓦片地图)
- HTML5之WebSocket教程(三)-通信模型socket.io
- mysql游标示例 mysql游标简易教程 mysql批量操作数据 mysql批量更新数据 mysql逐条更新数据
- socket.io学习教程之基础介绍(一)
- 使用socket.io制做简易WEB聊天室
- socket.io 入门教程
- socket.io学习教程之基本应用(二)