使用 jquerymobile web 应用框架的聊天应用答案

【问题标题】：Chat app using jquerymobile web app framework使用 jquerymobile web 应用框架的聊天应用
【发布时间】：2011-11-11 02:02:36
【问题描述】：

在我之前的问题中，我询问了如何使用客户端技术尤其是使用 jquery mobile 来实现聊天功能。我也在 jquery 移动论坛上提出了这个问题，但我很失望。最后我可以通过引用这个blog在我的本地机器上设置聊天功能

我正在运行 jsJac 客户端聊天，但现在我使用 google 搜索的 jquery 移动框架实现了同样的事情，并试图弄清楚它是如何完成的，但找不到任何这样的例子。如果对如何做和完成工作有任何建议和想法，请帮助实现这一目标。

谢谢。

【问题讨论】：

标签： javascript jquery-mobile xmpp mobile-website

【解决方案1】：

pub nub 的人们已经将我的代码加入到他们的示例中如果下面的代码不起作用，请访问网站转到http://www.pubnub.com/blog/easy-mobile-chat-html5-jquery-mobile

这个 html 可以直接在浏览器中使用（您不需要服务器 - 对移动网络应用很有用）

例如。在您的 c: drive c:\temp\chat.html 上使用以下 html 创建一个文件。然后将您的 chrome 浏览器指向文件：///C:/temp/chat.html。或者将 html 上传到主机。然后将 iphone 或 android 或 PC 浏览器指向 url，让你的下巴掉下来。手机 - 手机到电脑聊天！这纯粹在 js 客户端中运行，您不需要自己的服务器

注意，这是一个开放的演示聊天频道，请转到 pub nub 了解更多详情http://www.pubnub.com

享受

<!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>

【讨论】：