WebSocketServer Cocos2djs - part 4 - ios

This is the fourth blog entry that I'm going to write to explain what was the procedure i follow to create a native WebSocket Server for Cocos2dJs and examples to test it in android and ios.

This fourth entry is going to be about on how to create a simple sample of a WebSocket server for cocos2djs using ios app.

(tested with cocos2djs 3.13.1)

Cocos2djs WebSocket Server in IOS

1. Create a new Cocos2djs project

• cocos new HelloProject -l js 

 2. Follow the instructions in the first blog entry and configure the libwebsocket.

3. From the wsserver-cocos2djs\src copy the four c++ files to the directory HelloProject/framework/runtime-src/Classes

4. Inside the "Classes" directory modify the file "AppDelegate.cpp".

• Add at the beginning the include to our new javascript binding .h.
• #include "jsb_websocketserver.h"
• In the middle of the file inside the function AppDelegate::applicationDidFinishLaunching(), register the new websocket server javascript binding functions
•  sc->addRegisterCallback(register_jsb_websocketserver);

6. Add the new four files to the Xcode Project.
7. Add also the libwebscoket.h and lws_config.h from the cocos2x-x\external\websockets\include\ios. (Your Clases directory must look like this)

7. Compile the project

Running the application

The app has three buttons and a console where it prints all the events. You can:

• Stop a server
• Broadcast message
• Create new client connection.

To test it you need to connect your phone to a WIFI. (it needs an IP address)

You can also test the server using the wsserver-cocos2djs\test-server.html. Modify the file and put the IP address of your phone.

Tested on Iphone 5c.



Part 1 - WebSocketServer Cocos2djs - libwebsocket
Part 2 - WebSocketServer Cocos2djs - c++ and javascript binding
Part 3 - WebSocketServer Cocos2djs - android
Part 4 - WebSocketServer Cocos2djs - ios

WebSocketServer Cocos2djs - part 3 - android

This is the third blog entry that I'm going to write to explain what was the procedure i follow to create a native WebSocket Server for Cocos2dJs and examples to test it in android and ios.

This third entry is going to be about on how to create a simple sample of a WebSocket server for cocos2djs using android.

(tested with cocos2djs 3.13.1)

Cocos2djs WebSocket Server in Android

1. Create a new Cocos2djs project

• cocos new HelloProject -l js 

 2. Follow the instructions in the first blog entry and configure the libwebsocket library.

3. From the wsserver-cocos2djs\src copy the four c++ files to the directory HelloWorld/frameworks/runtime-src/Classes

4. Inside the "Classes" directory modify the file "AppDelegate.cpp".

• Add at the beginning the include to our new javascript binding
• #include "jsb_websocketserver.h"
• In the middle of the file inside the function AppDelegate::applicationDidFinishLaunching(), register the new websocket server javascript binding functions
•  sc->addRegisterCallback(register_jsb_websocketserver);

5. From the wsserver-cocos2djs copy the file Android.mk to the directory HelloWorld/frameworks/runtime-src/proj.android/jni (do a backup of the existing Android.mk in that directory)

6. Finally, copy the wsserver-cocos2djs\app.js to the HelloProject\src\

7. Compile the project.and make sure everything works.

Running the application

The app has three buttons and a console where it prints all the events. You can:

• Stop a server
• Send a broadcast message to all clients
• Create new client connection.

To test it, you need to connect your phone to a WIFI. (it needs an IP address)

You can also test the server using the wsserver-cocos2djs\test-server.html. Modify the file and put the IP address of your phone.

Tested on a Nexus 5.


Part 1 - WebSocketServer Cocos2djs - libwebsocket
Part 2 - WebSocketServer Cocos2djs - c++ and javascript binding
Part 3 - WebSocketServer Cocos2djs - android
Part 4 - WebSocketServer Cocos2djs - ios

WebSocketServer Cocos2djs - part 2 - c++ and javascript binding

This is the second blog entry where to explain what was the procedure i follow to create a native WebSocket Server for Cocos2dJs and examples to test it in android and ios.

In this second entry i'm going to explain a little bit about the c++ implementation of the Websocket server, the javascript binding and the javascript code that can be used.

(tested with cocos2djs 3.13.1)

Cocos2djs WebSocket Server

Websocket Server Implementation

The implementation comes from a copy of the files Websocket.h and Websocket.cpp from the same cocos2d-x. (cocos2d-x\cocos\network).

• I get some ideas from https://github.com/mnisjk/cppWebSockets.
• Used the same thread management than in Websocket client.
• Created all callbacks to the server. 
• Maintains a list of all the clients and their messages.
• Create a delegate class with the methods onStart, onStop, onMessage, onConnection, onDisconnection.
• I'm not a very skilled C++ developer so the thread and memory management can be improved. (Anyone that wants to contribute is welcome)

Javascript Binding

The implementation comes from a copy of the files jsb_websocket.h and jsb_websocket.cpp from the same cocos2d-x. (cocos2d-x\cocos\scriptting\js\network).

Javascript Api

The javascript api includes a class with following interface.

Class Name: WebSocketServer

Constructor: WebSocketServer(port, protocol) 

Methods:

• stop()
• send(clientId, message)
• broadcast(message)

Listeners:

• onServerUp()
• onServerDown ()
• onMessage(clientId, message)
• onConnection(clientId)
• onDiscconection(clientId)
• onError(error)

Attributes:

• readyState  (possible values are WebSocketServer.UP, WebSocketServer.DOWN, WebSocketServer.STARTING, WebSocketServerSTOPPING)

The best way to see how it works is to see the "app.js" in the GitHub repository and follow the examples for android and ios.

https://github.com/carlgira/wsserver-cocos2djs.git


Part 1 - WebSocketServer Cocos2djs - libwebsocket
Part 2 - WebSocketServer Cocos2djs - c++ and javascript binding
Part 3 - WebSocketServer Cocos2djs - android
Part 4 - WebSocketServer Cocos2djs - ios

WebSocketServer Cocos2djs - part 1 - libwebsocket

This is the first blog entry that I'm going to write to explain what was the procedure i follow to create a native WebSocket Server for Cocos2dJs and examples to test it in android and ios.

This first entry is going to be about how to create the libraries needed to use the WebSocketServer library.

Libwebsockets is a C library included inside Cocos2d-x to handle websockets. The thing, is that by default the functionality of the "server" is disabled in Cocos2d-x, so its necessary to re-compile the library changing one flag.

The easiest way is to download from GitHub the  precompiled zip so you can  use it directly, or maybe if you want, I'm leaving instructions so you can compile it yourself.

(tested with cocos2djs 3.13.1)

PRECOMPILED LIBWEBSOCKET

 I'm including a prebuilt libwebsocket in the git repository so you can add the lib directly to your project.

1. Clone the repository

• git clone https://github.com/carlgira/wsserver-cocos2djs.git

 2. Open the file websockets.zip. (Inside there is a "websocket" directory)
 3. Create a new cocos2djs project

• cocos new HelloWorld -l js

4. Create a backup of the original libraries.

• cd HelloWorld/frameworks/cocos2d-x/external
• mv websockets websockets_bk

 5. Copy the new "websocket" dir inside the "external" directory.

6. Now, try to compile the project and see if everything works.

• cocos compile -p android

RECOMPILE LIBWEBSOCKETS

Enabling WebSocketServer in Libwebsockets

The "server" function of the libwebsocket library is disabled by default so it's necessary, to recompile the library changing one flag.  

1. Clone the repository of cocos2d-x-3rd-party-libs-src

• git clone https://github.com/cocos2d/cocos2d-x-3rd-party-libs-src

      2. Follow the instructions on the github page (you are going to need to install, cmake, autoconf, automake and libtool)

      3. Change the file cocos2d-x-3rd-party-libs-src\contrib\src\websockets\rules.mak

• Look for "-DLWS_WITHOUT_SERVER=1" and remove it.

      4. Now it's time to recompile. Build the library for the number of platforms you want. I did it and test it for android and ios.  Go to the build directory and execute the build script.

• Android

• ./build.sh --platform=android --libs=websockets
• IOS
•  ./build.sh --platform=ios --libs=websockets

• You can do it for other platforms.

       5. If everything went well, you'll  have an "android" and a "ios" directory with the compiled libraries and the .h files.

Include the library to your project

 You can add the library to your cocos2d-x installation but is better if you test it first in a new project.

1. Create a new cocos2djs project

• cocos new HelloWorld -l js

2. Create a backup of the original libraries.

• cd HelloWorld/frameworks/cocos2d-x/external
• mv websockets websockets_bk

3. Now it's time to copy the library. The thing is that the directory structure from the cocos2d-x-3rd-party-libs-src and the one in the project is TOTALLY different, so you'll have to do some magic to have the same directory tree structure and copy the files from one place to the other.

 4. After finish the previous step, you'll have to copy two more files.

• Look for a file called lws_config.h inside the cocos2d-x-3rd-party-libs-src\contrib directory and copy the file to the "include" directory of the websocket dir for each platform. 
• The recompilation has worked, if inside this file there is commented  variable called LWS_NO_SERVER.
• You are going to find several lws_config.h files. Choose one file from an android directory and other from an ios directory.

• Go to the backup websocket directory and open the android folder. Copy the file Android.mk in the same place in your new websocket dir.

5. Now, try to compile the project and see if everything works.

• cocos compile -p android

This was the first step. The next entries are going to explain some details on the c++ implementation, the javascript binding, the configuration in android and ios projects, and the explanation of the javascript api.

Part 1 - WebSocketServer Cocos2djs - libwebsocket
Part 2 - WebSocketServer Cocos2djs - c++ and javascript binding
Part 3 - WebSocketServer Cocos2djs - android
Part 4 - WebSocketServer Cocos2djs - ios