nodejs的websocket实现与cocoscreator前端进行简单通讯(cocoscreator后端接口入门)

看了几天nodejs后决定自己试试写一个简单的cocoscreator的服务端程序

nodejs的本体可以直接百度nodejs进入官网下载,安装后应该会自动下载安装npm并且配置环境变量,没有正常安装,请自行百度

程序是用的是nodejs-websocket的包实现的,在cmd命令窗口中输入一下代码
npm install nodejs-websocket -g
即可将nodejs-websocket安装在全局环境

先来看看nodejs-websocket的一篇介绍博客:https://www.jianshu.com/p/f0baf93a3795

// websocket.js
const ws = require('nodejs-websocket')

const createServer = () => {
  let server = ws.createServer(connection => {
    connection.on('text', function(result) {
      console.log('发送消息', result)
    })
    connection.on('connect', function(code) {
      console.log('开启连接', code)
    })
    connection.on('close', function(code) {
      console.log('关闭连接', code)
    })
    connection.on('error', function(code) {
      console.log('异常关闭', code)
    })
  })
  return server
}

module.exports = createServer()

ws是对nodejs-websocket包的引用,在代码最主要的部分ws.createServer是一个回调函数,对其引用server调用.listen()方法可以使其监听服务器中的指定端口,每当此端口被客户端连接时,server便会被调用。

ws.createServer也是一个回调函数,当客户端连接服务器时,便会向此函数传入一个代表连接的参数也就是connection,此回调函数里分别注册了四个事件,分别是

  • ‘text’:当客户端向服务端发送字符码时会响应该事件,字符码可以在事件回调函数中通过形参result传入服务端。
  • ‘connect’:当客户端连接上服务端时会抛出该事件
  • ‘close’:当客户端与服务器端连接断开时会抛出该事件
  • ‘error’:当连接出现异常时会抛出该事件

还有一个’binary’,用法与text类似,不过接受的数据是二进制块

梳理一下,每当客户端连接服务端时,server对应的ws.createServer方法就会被调用,方法放出一个代表连接的对象传入ws.createServer()中的回调函数,对这个连接对象进行事件监控就可以接受到来自客户端的消息,这个连接对象会一直存在,直到它被服务器端或客户端请求关闭或者异常关闭,关闭后会触发一个close事件。

到这里我们就能够被动的接收来自客户端的信息了,但是websocket之所以出现就是因为ajax等方法的服务器不能向客户端发送信息,所以我们还得知道怎么向客户端发送消息。

nodejs-websocket发送数据的方法也是在连接对象类connection上的:

  • connection.send([字符串或者二进制块]):发送一个字符码或者一个二进制块,
  • connection.sendText([字符串]):发送一个字符码
  • connection.sendBinary([二进制块])发送一个二进制块

当连接建立好,我们就可以调用以上方法来实现从服务端向客户端发送数据。

扫描二维码关注公众号,回复: 11250930 查看本文章

正文开始

我们先写一个什么都不做的服务端,用来建立连接但是不做任何事

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

var server = ws.createServer(function(conn){
    console.log("建立连接");
    conn.on('error', function(){

    });
}).listen(3000);


每当有客户端连接服务端时,服务端便会输出一段字符串,代码中注册了error事件来防止服务器因为一些意外的错误而崩溃。

将以上代码写入一个任意名称的.js文件中,然后在cmd命令窗中进入文件所在的目录下,输入node 名称.js来运行程序

然后新建一个cocoscreator工程,再新建一个名称随意的js脚本文件
在这里插入图片描述
将该脚本挂到任意节点下在这里插入图片描述
然后开始编辑脚本

 onLoad () {
     var ws = new WebSocket("ws://localhost:3000");
     ws.onopen = function(event){
        cc.log("连接建立");
    }
 },

在onLoad方法中new一个WebSocket的对象,对象传参为服务端的地址,我是在本机上搭的服务器,所以连接也是在本机,3000代表端口号,在服务端代码中我们执行了listen(3000)就代表服务端会监听本机地址的3000端口号。new成功即成功连接上了服务端,ws.onopen事件在连接完全建立后会被抛出。

保存后在cocoscreator界面点击测试。

在这里插入图片描述
在这里插入图片描述
可以看到服务端和客户端都输出了这条语句,如果没有反应,请重启服务端与客户端再试试。

连接成功后即可以进行简单通讯了,我们在cocos工程中加一个Lable组件,一个输入框组件,一个按钮组件,用来实现输入框输入后客户端向服务端传输数据,然后服务端向所有客户端转发数据,客户端将收到的数据显示在Lable组件的需求。

在这里插入图片描述
然后将组件挂载到脚本上
在这里插入图片描述
Label和editbox需要向程序提供或者供程序修改数据,所以需要挂载,button用来触发脚本中的提交事件,所以不用挂上来。

接下来可以写程序了。

onLoad () {
     this.ws = new WebSocket("ws://localhost:3000");
     this.ws.onopen = function(event){
        cc.log("连接建立");
    }

    var self = this;

    this.ws.onmessage = function(event){
        self.label.string = event.data;
    }
 },

 sendMassage: function(){
    var massage = this.editbox.string;
    if (this.ws.readyState === WebSocket.OPEN) {
        this.ws.send(massage);
    }
 },

将var ws修改为this.w s,这样我们就可以在其他的方法中访问ws了。
onLoad中定义了一个self变量来保存this引用,这是为了接下来在事件方法的内部能够访问到外部的Label组件。(this在事件回调中代表的值与在外边的值不一样)
在onLoad中对ws注册onmessage事件,如果接收到服务端的数据,这个事件就会被触发,方法中将label设置为发过来的字符串。
在脚本中新建一个sendMassage的方法,这个方法用来获取输入框中的字符串,并将此字符串发送给服务端,ws.send就是向服务端发送数据的方法,需要注意的是,每次发送数据都需要检查一下ws的readyState属性,只有当其等于WebSocket.OPEN也就是1时,ws才被允许发送数据。
sendMassage需要被button调用
在button组件中加入对sendMassage的引用

客户端程序就这样,接下来写服务端程序

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

var server = ws.createServer(function(conn){
    console.log("建立连接");
    conn.on('error', function(){

    });
    conn.on('text', function(str){
      server.connections.forEach(function(conn) {
        conn.sendText(str)
      })
    })
}).listen(3000);

我们在createServer的回调函数中注册了’text’的事件,每当本连接中客户端向服务端传输字符串时就会抛出该事件。
server.connection会返回所有连接到该服务端的连接对象,对这些连接对象都发送我们接收到的字符串就可以实现转发字符的功能了。
保存代码并重启服务端与客户端,就可以实现多个客户端交互的功能了。

在这里插入图片描述
在这里插入图片描述
就酱

如果还有不明白的地方可以关注我的微信公众号私聊我:‘九艺杂货铺’

猜你喜欢

转载自blog.csdn.net/weixin_43141482/article/details/90699152