壹:十行代码带你打穿服务端与客户端通信


上一章:零:聊一下学啥

说好的十行代码,你们数一数!

var ws = require("nodejs-websocket");

var server = ws.createServer(function (connect) 

{

    connect.on("text", function (data) {

        console.log('收到消息=',data)

    })

    connect.on("close", function (code, reason) {});

    connect.on("error", function (code, reason) {});

}).listen(3000)

console.log('websocket服务端启动')


看不太懂?没关系,只要知道代码有十行,古人诚不我欺 即可!

工欲善其事必先利其器

说代码之前我们先进行一些准备活动。

3个软件,1个系统工具

(1)nodejs 程序安装 下载

(2)vscode 代码编辑器 下载

(3)Cocos Creator客户端游戏编辑器  下载

(4)CMD系统命令行工具

1,NodeJs的安装:

在上述的下载链接选择win安装包的64位,剩下的就是一路下一步即安装完成


2,vscode

此编辑器安装也没有什么太大的难点,一路下一步安装即可。


3,Cocos Creator

这个游戏引擎我们先下载它的安装面板,从面板里面下载引擎。安装面板的安装就是下一步下一步,安装好后注册一个账号登录即可


安装面板安装好后,我们开始下载引擎。


点击下载按钮下载安装最新稳定版本即可


4,CMD命令行

点击win10系统左下角窗口按钮

切换成英文输入法,输入cmd,选中打开如下程序。

到此准备活动全部完毕!



服务端代码:

(1)创建服务端代码

还记得我们上面的十行代码吗?现在先在桌面上新建一个文本文件,重命名为server.js文件


把我们的十行代码直接拷贝进server.js,保存文件!(如果你安装了VScode代码编辑器,双击就可以打开.js文件)

为了看的更方便我们加了一些注释和打印信息,你可以从所有的注释信息里面一行一行看下来就能知道每一行代码都执行了什么逻辑。

//引入websocket模块

let ws = require("nodejs-websocket");

//启动websocket服务器

let server = ws.createServer(function (connect) {

    connect.on('text', function (result) {

        console.log('接收消息', result)

    })

    connect.on('close', function (code) {

        console.log('关闭连接', code)

    })

    connect.on('error', function (code) {

        console.log('异常关闭', code)

    })

//设置端口号为3000

}).listen(3000)

console.log('websocket服务端启动') 


(2)跑起服务端代码

进入项目文件夹

为了不让桌面变得非常混乱我们新建一个文件夹server,并且把刚才的server.js文件拖入文件夹中


在启动服务端程序前,我们先来为服务端安装一个websocket的模块,打开CMD命令行程序

输入cd空格后,把桌面上的文件夹直接拖入CMD界面,最后按回车



看到最前面的盘符路径都对了之后再进行下一步操作。


安装NodeJS模块

初始化npm下载工具(这个工具是nodejs自带的下载nodejs库的工具)

npm init -y

安装websocket

npm install nodejs-websocket 

在当前项目文件夹下安装nodejs模块,不会影响到其它项目


安装需要一些时间,安装好后看看文件夹里面如果多了下图这些文件就是websocket模块安装成功了



(3)运行nodejs服务端

在CMD命令行中输入如下命令:

node server.js

出现如下提示,证明服务端启动成功!是不是十分简单!


关闭服务端

如果想要关闭服务端只要按照Ctrl按键不放,再按C键即可退出。


客户端

本节课我们先来创建一个简单的客户端!

打开Cocos的安装面板来新建一个项目


选择空模板,在项目名称处起名Client,选择一个保存项目的位置(日后能找的到的)创建并打开项目


右键点击   asset -> 新建 -> Scene

新建一个场景,并双击红框处场景进入当前场景(可以给场景重命名为Client)


再次右键点击   asset -> 新建 -> JavaScript

同时改名脚本Client

脚本绑定场景中节点(为了让场景中的Canvas节点被创建时候自动运行脚本)


拖入成功后会有如下显示


双击刚才创建的Client脚本


在start函数处填写如下代码,基本和服务端差不多

不同处在于填写了连接服务端ip的信息

  let ws = new WebSocket("ws://127.0.0.1:3000");

  let ws = new WebSocket("ws://127.0.0.1:3000");

        ws.onopen = function (event) {

            console.log("连接服务端");

        };

        ws.onmessage = function (event) {

            console.log("接收服务端信息: " + event.data);

        };

        ws.onerror = function (event) {

            console.log("异常关闭");

        };

        ws.onclose = function (event) {

            console.log("断开连接");

        };

填写后


启动客户端(这里我选择用安卓了chrome浏览器方便调试,强烈建议开发阶段用这个浏览器作为调试工具)

千万记住保存代码和项目后点击启动游戏,启动游戏前按上面的教程

node server.js

在CMD中先启动服务端


那么你将会在浏览器里面看到我们的启动界面(黑漆漆一片?),当然我们要看看之前的打印信息,在浏览器里面(chrome浏览器)快捷键Ctrl+Shift+I进入开发者工具如下图


以上就完成了服务端和客户端的连接!


客户端给服务端发送信息

连接之后,我们来看看从客户端怎么给服务端发送信息。

在客户端连上服务端的时候添加如下代码ws.send('');引号中的消息内容可以自己定义

ws.send('客户端1发来消息');

再次启动服务端和客户端后看到CMD中收到如下信息,大功告成


服务端给客户端发送信息

来而不往非礼也!我们在服务端接收了客户端发过来的消息,正好可以顺势给客户端发送一个欢迎光临的回赠消息

connect.sendText('欢迎光临');

我们可以在服务端接收客户端消息的时机,回送一条消息

于是你就可以在谷歌浏览器中看到如下回复代码:

最后:如果你有什么疑问和建议随时欢迎来到群里和我沟通,我将尽快为您解答247260198

本教程所有代码均在github上分享:下载

下一章:贰:极简聊天系统

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,911评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,014评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,129评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,283评论 1 264
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,159评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,161评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,565评论 3 382
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,251评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,531评论 1 292
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,619评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,383评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,255评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,624评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,916评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,199评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,553评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,756评论 2 335

推荐阅读更多精彩内容