Chat app using jquerymobile web app framework

Question

I my previous question I asked how to implement the chat feature using client side technology especially using jquery mobile. I had also put up the question in the jquery mobile forums too but I was disappointed. Finally I was able to set-up a chat feature on my local machine by referring this blog

I am running jsJac client side chat but now I am implement the same thing using jquery mobile frame work I googled and try to figure out how it can be done, but could not find any examples as such. If any suggestions and ideas on how to do and get the things done, kindly help to achieve this.

Thank you.

ozmike · Accepted Answer · 2012-10-20T01:37:29.967

The people at pub nub have kindly incorporated my code in into the samples on their web site if the code below dosen't work goto http://www.pubnub.com/blog/easy-mobile-chat-html5-jquery-mobile

This html will work straight out of the box in the browser (you don't need a server - useful for mobile web apps)

eg. Create a file with the below html on your c: drive c:\temp\chat.html . Then point your chrome browser to file:///C:/temp/chat.html. Alternatively upload the html to a host. Then point the iphone or android or PC broswer to the url and let your jaw drop. mobile - to mobile to pc chat! This runs purely in the js client u don't need your own server

Note, this is a open demo chat channel, goto pub nub for more details http://www.pubnub.com

Enjoy

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Pub Nub Chat</title>
        <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

    <script src=http://cdn.pubnub.com/pubnub-3.1.min.js></script>



    <script>
    chatName = "";
    $(document).ready(function(){

            PUBNUB.subscribe({
            channel  : 'chat',
            callback : function(text) { 
                $("#incomingMessages").append("<div class='message'><span class='username'>" + "></span> " + text + "</div>");
                $("#incomingMessages").scrollTop($("#incomingMessages")[0].scrollHeight);

            }

        });


        $("#chatNameButton").click(function(){
        chatName = $("#chatNameText").val();
        if(chatName.length <= 0)
            chatName = "unknown";

        $(location).attr('href',"#chatPage");
        });

        $("#chatSendButton").click(function(){

        PUBNUB.publish({
                channel : "chat",
                message : chatName + " : " + $("#messageText").val()
            })
        $("#messageText").val("");
        });


    });

    </script>

    <style>
    .message
    {
        padding: 5px 5px 5px 5px;
    }
    .username
    {
        font-weight: strong;
        color: #0f0;
    }
    .msgContainerDiv
    {
        overflow-y: scroll;
        height: 250px;
    }
    </style>
</head> 

<body> 

<div id=pubnub pub-key=demo sub-key=demo></div>



    <div data-role="page" id="loginPage" data-role="page" data-theme="a">
        <div data-role="header">
            <h1>Pub Nub Chat</h1>
        </div>

        <div data-role="content">
        <div data-role="fieldcontain">
            <label for="chatNameText"><strong>Chat Name:</strong></label>
            <input type="text" name="chatNameText" id="chatNameText" value=""  />
            <button id="chatNameButton">Ok</button>
        </div>
        </div>

        <div data-role="footer">
            <h4>Pub Nub Chat</h4>
        </div>
    </div>

    <div data-role="page" id="chatPage" data-role="page" data-theme="a">

        <div data-role="header">
            <h1>Pub Nub Chat</h1>
        </div>

        <div data-role="content">
        <div id="incomingMessages" name="incomingMessages" class="msgContainerDiv" ></div>
        <label for="messageText"><strong>Message:</strong></label>
        <textarea name="messageText" id="messageText"></textarea>

        <fieldset class="ui-grid-a">
            <div class="ui-block-a"><a href="#loginPage" id="goBackButton" data-role="button">Go Back</a></div>
            <div class="ui-block-b"><button data-theme="a" id="chatSendButton" name="chatSendButton">Send</input>
        </fieldset>
        </div>

        <div data-role="footer">
            <h4>Pub Nub Chat</h4>
        </div>
    </div>

</body>
</html>

Chat app using jquerymobile web app framework

1 Answers1

Linked