Question

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

，我可以在本地计算机上设置聊天功能

我正在运行jsJac客户端聊天，但现在我使用jquery移动框架工作实现相同的东西我用Google搜索并试图找出它是如何完成的，但是找不到任何这样的例子。如果有任何关于如何做和完成任务的建议和想法，请帮助实现这一目标。

谢谢。

Answer 1

酒吧的人们将我的代码合并到他们的样本中网站，如果下面的代码不起作用转到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 broswer指向网址，让你的下巴掉下来。移动 - 移动到电脑聊天！这完全在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>

使用jquerymobile Web应用程序框架聊天应用程序

1 个答案: