랩핑한지 오래 되었지만 제가 직접 하나하나 랩핑하였습니다.


https://github.com/windofwind/pureMVC-for-Qooxdoo/


qooxdoo 에 pureMVC 적용하고 싶으신 분들은 프로젝트 라이브러리에 추가하세요.

저작자표시 비영리 변경금지

'Dev > Qooxdoo' 카테고리의 다른 글

Qooxdoo Class 만들기  (0) 2015.04.01
qooxdoo로 만든 socket class  (0) 2015.03.03
1. qooxdoo Project 만들기  (0) 2012.07.27
JQuery Animation을 통해서 Qooxdoo 프로퍼티로 애니메이션 구현 예제  (0) 2012.07.09
Qooxdoo를 이용한 객체 생성 및 해제 예제  (0) 2012.07.09
appearances, decorations 추가 하기 (예-버튼)  (0) 2012.05.30
이미지 미리받아놓기  (0) 2012.05.23
다국어 지원  (0) 2012.05.18
해제 관련  (0) 2012.05.09
qooxdoo 오른쪽 버튼 활성화  (0) 2012.05.09

https://simplapi.wordpress.com/2012/07/02/linking-socket-io-to-qooxdoo/


Qooxdoo is a great framework, but sometimes you need to add extra content to it, and this is not so simple.

Here is a basic class and idea to link Socket.IO client API to Qooxdoo framework :

Before playing

Before doing anything with Socket.IO, you first need to include thooses files into your project.
Start getting Node.JS, and installing Socket.IO using « npm install socket.io ». This should install in node_module (in node.js root folder) socket.io folder. Inside this node_module, you should find the client API of Socket.IO here :
%NODE_ROOT%/node_modules/socket.io/node_modules/socket.io-client/dist

The dist folder should contains 4 files :

  • socket.io.js
  • socket.io.min.js
  • WebSocketMain.swf
  • WebSocketMainInsecure.swf

Regarding what you want, you need only 3 files : choose between the socket.io.js and the min version. I will prefer here the minimal but it does not change so much things after all.

I didn’t find the good way to put thooses files in the qooxdoo main project, but this should do the trick :
On resource folder, create a script folder, create inside this folder a « socket » (what you want for this one) folder. Put 3 files into this one.

Now you have the socket.io resource folder on your Qooxdoo app. But it’s not enough for now.

On the config.json file, you need to force the system to copy it, I use here the « build-script » which is the remapped default build folder :

1
2
3
4
5
6
7
8
9
10
11
12
13
"jobs":{
    "build-script":{
        "copy-files" :{
            "files":[
                "./script/socket/"
            ],
            "source" : "./source/resource/",
            "target"  : "./build/"
        },
        "add-script":[{
            "uri":"script/socket/socketio.js"
        }]
(...)

The add-script is the most important part, it force the system to load the script as part of the qooxdoo launch. The script will be launched around Application.main start (I didn’t check exactly but before it’s too early and at the end of main it’s available).

Now you can play with Socket.IO over Qooxdoo, here is a basic class to deal with inside Qooxdoo system (under LGPLv3, like all sources I post here) :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
/**
 * This class is a direct link with socket.io.
 */
qx.Class.define("myapp.api.WebSocket",{
    extend : qx.core.Object,
 
    //Socket.io events
    events :{
        /** socket.io connect event */
        "connect"           : "qx.event.type.Event",
        /** socket.io connecting event */
        "connecting"        : "qx.event.type.Data",
        /** socket.io connect_failed event */
        "connect_failed"    : "qx.event.type.Event",
        /** socket.io message event */
        "message"           : "qx.event.type.Data",
        /** socket.io close event */
        "close"             : "qx.event.type.Data",
        /** socket.io disconnect event */
        "disconnect"        : "qx.event.type.Event",
        /** socket.io reconnect event */
        "reconnect"         : "qx.event.type.Data",
        /** socket.io reconnecting event */
        "reconnecting"      : "qx.event.type.Data",
        /** socket.io reconnect_failed event */
        "reconnect_failed"  : "qx.event.type.Event",
        /** socket.io error event */
        "error"             : "qx.event.type.Data"
    },
 
    properties:{
        /**
         * The url used to connect to socket.io
         */
        url:{
            nullable:   false,
            init:       "http://"+window.location.hostname+"/",
            check:      "String"
        },
        /** The port used to connect */
        port:{
            nullable:   false,
            init:       8080,
            check:      "Number"
        },
        /** The namespace (socket.io namespace), can be empty */
        namespace:{
            nullable:   true,
            init:       "",
            check:      "String"
        },
        /** The socket (socket.io), can be null */
        socket:{
            nullable:   true,
            init:       null,
            check:      "Object"
        },
        /** Parameter for socket.io indicating if we should reconnect or not */
        reconnect:{
            nullable:   true,
            init:       true,
            check:      "Boolean"
        },
        connectTimeout:{
            nullable:   true,
            init:       10000,
            check:      "Number"
        },
        /** Reconnection delay for socket.io. */
        reconnectionDelay:{
            nullable:   false,
            init:       500,
            check:      "Number"
        },
        /** Max reconnection attemps */
        maxReconnectionAttemps:{
            nullable:   false,
            init:       1000,
            check:      "Number"
        }
    },
 
    /** Constructor
     *
     * @param namespace {string ? null} The namespace to connect on
    */
    construct: function(namespace){
        this.base(arguments);
        if(namespace !== null){
            this.setNamespace(namespace);
        }
        this.__name = [];
    },
 
    members:{
        //The name store an array of events
        __name : null,
 
        /**
         * Trying to using socket.io to connect and plug every event from socket.io to qooxdoo one
        */
        connect:function(){
            if(this.getSocket() != null){
                this.getSocket().removeAllListeners();
                this.getSocket().disconnect();
            }
            this.setSocket(io.connect(this.getUrl()+this.getNamespace(), {
                'port': this.getPort(),
                'reconnect': this.getReconnect(),
                'connect timeout' : this.getConnectTimeout(),
                'reconnection delay': this.getReconnectionDelay(),
                'max reconnection attempts': this.getMaxReconnectionAttemps(),
                'force new connection':true
            }));
 
            this.on("connect",          function(){     this.fireEvent("connect");                  }, this);
            this.on("connecting",       function(e){    this.fireDataEvent("connecting", e);        }, this);
            this.on("connect_failed",   function(){     this.fireEvent("connect_failed");           }, this);
            this.on("message",          function(e){    this.fireDataEvent("message", e);           }, this);
            this.on("close",            function(e){    this.fireDataEvent("close", e);             }, this);
            this.on("disconnect",       function(){     this.fireEvent("disconnect");               }, this);
            this.on("reconnect",        function(e){    this.fireDataEvent("reconnect", e);         }, this);
            this.on("reconnecting",     function(e){    this.fireDataEvent("reconnecting", e);      }, this);
            this.on("reconnect_failed", function(){     this.fireEvent("reconnect_failed");         }, this);
            this.on("error",            function(e){    this.fireDataEvent("error", e);             }, this);
        },
 
        /**
         * Emit an event using socket.io
         *
         * @param name {string} The event name to send to Node.JS
         * @param jsonObject {object} The JSON object to send to socket.io as parameters
        */
        emit:function(name, jsonObject){
            this.getSocket().emit(name, jsonObject);
        },
 
        /**
         * Connect and event from socket.io like qooxdoo event
         *
         * @param name {string} The event name to watch
         * @param fn {function} The function wich will catch event response
         * @param that {mixed} A link to this
        */
        on:function(name, fn, that){
            this.__name.push(name);
            if(typeof(that) !== "undefined" && that !== null){
                this.getSocket().on(name, qx.lang.Function.bind(fn, that));
            }else{
                this.getSocket().on(name, fn);
            }
        }
    },
 
    /**
     * Destructor
     */
    destruct : function(){
        if(this.getSocket() != null){
            //Deleting listeners
            if(this.__name !== null && this.__name.length >= 1){
                for(var i=0; i<this.__name.length; ++i){
                    this.getSocket().removeAllListeners(this.__name[i]);
                }
            }
            this.__name = null;
 
            this.removeAllBindings();
 
            //Disconnecting socket.io
            try {
                this.getSocket().socket.disconnect();
            } catch(e) {}
 
            try {
                this.getSocket().disconnect();
            } catch(e) {}
 
            this.getSocket().removeAllListeners("connect");
            this.getSocket().removeAllListeners("connecting");
            this.getSocket().removeAllListeners("connect_failed");
            this.getSocket().removeAllListeners("message");
            this.getSocket().removeAllListeners("close");
            this.getSocket().removeAllListeners("disconnect");
            this.getSocket().removeAllListeners("reconnect");
            this.getSocket().removeAllListeners("reconnecting");
            this.getSocket().removeAllListeners("reconnect_failed");
            this.getSocket().removeAllListeners("error");
        }
    }
});

This class can be used like this :

1
2
3
4
5
6
7
8
9
10
var ws = new myapp.api.WebSocket();
//Here you should customize port, hostname, ...
 
//Connect with previous setted properties
ws.connect();
 
ws.emit("achannel", "hello");
ws.on("achannel", function(result){
  console.log(result);
}, this);

Simple as this !

저작자표시 비영리 변경금지

'Dev > Qooxdoo' 카테고리의 다른 글

Qooxdoo Class 만들기  (0) 2015.04.01
랩핑했어요. pureMVC-for-Qooxdoo  (0) 2015.03.03
1. qooxdoo Project 만들기  (0) 2012.07.27
JQuery Animation을 통해서 Qooxdoo 프로퍼티로 애니메이션 구현 예제  (0) 2012.07.09
Qooxdoo를 이용한 객체 생성 및 해제 예제  (0) 2012.07.09
appearances, decorations 추가 하기 (예-버튼)  (0) 2012.05.30
이미지 미리받아놓기  (0) 2012.05.23
다국어 지원  (0) 2012.05.18
해제 관련  (0) 2012.05.09
qooxdoo 오른쪽 버튼 활성화  (0) 2012.05.09

closure란 내부함수가 외부함수의 Context에 접근할 수 있는 것이다


즉 클레스의 멤버처럼 쓸수 있는 것인데, 말로써 설명은 잘 못하겠고 예제를 참조하자.


예제 1)

(function() {
var nData = 10;

var testFunction = function() {
console.log(nData); // nData값을 참조한다.
};

testFunction(); // console에 10이 찍힌다.
})();


예제처럼 testFunction 안에서 nData를 참조했고 console 출력을 했다.


여기서 주의 점이 하나 있는데 함수 실행시점 값을 참조한다는 것이다.


또 말보단 예제로 .


예제2)


(function() {

var nData = 10;


var testFunction = function() {
console.log(nData); // nData값을 참조한다.
};

// 여기까진 nData가 10
testFunction(); // console에 100 이 찍힌다.

nData = 100;
// 여기서부터 nData가 100
testFunction(); // console에 100 이 찍힌다.

})();


주의

예제 2)같이 10을 원했는데 100이 나오는 실수가 많이 발생한다고 한다.

저작자표시 비영리 변경금지

'Dev > JavaScript' 카테고리의 다른 글

[Nestjs] transform.interceptor 를 Global로 사용시.  (0) 2023.01.06
[Nestjs] 개발 시작 전 알아두어야 할 것?  (0) 2023.01.03
requestAnimationFrame 가 호출이 안될때가 있다.  (0) 2017.01.17
Memory leak patterns in JavaScript  (0) 2012.08.20
Google Chart Tools, 빠르고 다이나믹한 차트 생성  (0) 2012.07.15
HTML5 API 강좌 #3 – 아이폰 Web App 만들기  (0) 2012.04.23
HTML5 API 강좌 #2 – Web SQL Database 와 GeoLocation  (0) 2012.04.23
파일이름 관련 함수  (0) 2012.03.27

+ Recent posts

티스토리툴바