AngularJS WebSocket Service Example

Categories Uncategorized

من رو نجات داد

وقتی وب سوکت کار می کنیم و یه کاری زیادی طول میکشه و کار دوم قبل از تموم شدن کار اول باید انجا بشه :

At my curent company we are using Angular.js for a new desktop application (yes, a desktop application, but I won’t get into that). Our app gets its data and events from a web service via a WebSocket connection. Angular comes bundled with some great tools to connect to REST servers, but it doesn’t come with anything to help you with real-time data (and it probably shouldn’t).

Here is an example of an Angular service (factory) that uses WebSockets to get data:

The Details

To explain this code in detail I will walk you through a usage scenario and step through each function and talk about what it does. Assume we have an angular controller called “customerList”. We need to access customer data in our new controller and our customer data comes from a websocket service somewhere in Canada. So you inject your new websocket service into the scope of your controller and you are able to call getCustomers(). Quick and dirty example for illustration purposes:

So the getCustomers function is called and we see that the getCustomers function creates a request object literal and passes that to the sendRequest() function:

You can see I am storing the response from sendRequest() in a variable called promise. I then return that promise. Let’s look at what sendRequest() actually does:

The sendRequest function first creates a defer object from the Q library that is bundled with Angular. (For more information on deferred objects and promises in angular I highly recommend the video on promises) After that it creates a new callbackId variable and then adds an object literal to the callbacks object using the new callbackId as the index.

So why have a callback ID and a callbacks object?

The callbacks variable is where I will store all requests that haven’t received a response yet. Because services implemented on the websocket side can be asynchronous, you could potentially send several requests to the websocket and the websocket could return responses in a different order than it received requests. This is where callback Ids come into play. Usually websocket servers will have a way for you to map responses from the websocket server to requests that you sent to it. Sending a user-generated callback_id to the websocket is one way to do this. In my case, I start at 0 and work my way up to 10000 then start over. You can see this in my getCallback() function:

Now back to sendRequest. After the callbackId is generated, and the deferred is stored in the callbacks variable, we add the new callbackId to the request message:

Then we send the request object to the websocket and return a promise:

Now out in Canada somewhere, our websocket server processes the request and sends back a list of customers to us through the websocket. When data comes in from the websocket we call the listener function:

The listener looks at the message coming in and sees that it looks something like this:

The listener() function sees the callback_id property and looks in our callbacks variable to see if we have a pending request waiting to be resolved. If there is one, it resolves the deferred object and deletes the callback object from the callbacks object-literal/dictionary/named-array:

And then, lo and behold, our scope variable, $scope.customers, is populated with our new customer list! And now you have a functioning websocket service. :-)

I know this all can seem like a lot if you are new to angular or haven’t heard of promises before. Feel free to ask any questions in the comments or email me on my contact form if you need help. I am usually pretty good about getting back to you.


مدیر تیم های توسعه
نظریه پرداز جوامع نوین مجازی
نویسنده مقالات در ماهنامه های تخصصی

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

× 1 = شش