Member Avatar for darkelflemurian

Good morning everyone I come here today with some questions in hopes that someone can help me through.

The problem:
At my work, I am requiered to create a chat app for mobile using html5 and websockets.

We have a custom made chat app for desktop in the company which works fine, on a server there is an application that is listening to the clients requests. There, everything works fine.

What I need is to be able to communicate the mobile app to the desktop apps. But i don't know where to begin.

Can someone provide some information or some links on how to do this.

Thanks in advance.

  • 4 Contributors
  • 4 Replies
  • 332 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by PubNub
Member Avatar for pixelsoul

If you have full control of your server/environment (which it sounds like you might) I would most likely use node.js with the Socket.io plugin. The reason I ask about whether you have your own server, is because a lot of hosts out there still don't support installs of Node.js. Building a chat application by it self would probably not be where the real strugle comes, but rather trying to intergrate with an your existing chat application you have already in place at work.

Here is a good tutorial from Nettuts on using Node and Socket.io to create a real-time chat application.
http://net.tutsplus.com/tutorials/javascript-ajax/using-node-js-and-websockets-to-build-a-chat-service/

Member Avatar for PubNub
WebSockets HTML5: A Simple Chat App

You can build real-time chat in a few lines of JavaScript pretty quick, and then integrate with your backend services ( your desktop app for example ) in a few more steps. This is the quickest way to write a real-time chat application on web or mobile. Tasks, such as sending and receiving data, take only one function call.

Full Example hosted here: Build Real-time Chat Apps in 10 Lines of Code

Enter Chat and press enter:
<div><input id="input" placeholder="you-chat-here"></div>

Chat Output:
<div id="box"></div>

<script src=http://cdn.pubnub.com/pubnub.min.js></script>
<script>(function(){
    var box     = PUBNUB.$('box'), 
    ,   input   = PUBNUB.$('input')
    ,   channel = 'chat';

    PUBNUB.subscribe({
        channel : channel,
        callback : function(text) { 
            box.innerHTML = 
            (''+text).replace( /[<>]/g, '' ) + '<br>' +
            box.innerHTML 
        }
    });

    PUBNUB.bind( 'keyup', input, function(e) {
        (e.keyCode || e.charCode) === 13 && PUBNUB.publish({
            channel : channel,
            message : input.value,
            x : (input.value='')
        })
    } );
})()</script>

So on the bind( 'keyup'... section you can directly chat P2P style, or instead you can post the chat message directly to your server via AJAX+JSON via CORS1/2 or JSONP if cross domain. If you are using jQuery then you can use the following:

var url = "http://URL_HERE?message="+escape(input.value);
$.getJSON( url, function(data) {
    console.log( "success", data );
})
.fail(function(e) {
    console.log( "error", e );
})

Then via your server (say you are running PHP) you can use the following to push our to the Web Connected Client:

$pubnub->publish(array(
    'channel' => 'chat',
    'message' => 'message text here'
));

// also send via Desktop Push mechanism (XMPP?)

That's a good starting point. There's more to it but send me a note at https://twitter.com/stephenlb if you have feedback or questions.

Edited by PubNub because: whitespace needed and completed a sentence. and a sample link. also added a few details about the desktop app.
commented: Nice example +8
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.