Приложение чата, использующее каркас веб-приложения jquerymobile - PullRequest
Новая
       59

Приложение чата, использующее каркас веб-приложения jquerymobile

2 голосов
/ 06 сентября 2011

На мой предыдущий вопрос я спросил, как реализовать функцию чата с использованием технологии на стороне клиента, особенно с помощью jquery mobile. Я также поставил вопрос на мобильных форумах jquery, но был разочарован. Наконец, я смог настроить функцию чата на своем локальном компьютере, сославшись на этот блог

Я запускаю чат на стороне клиента jsJac, но сейчас я реализую то же самое с помощью фреймворка jquery для мобильных устройств, который я погуглил и пытаюсь выяснить, как это можно сделать, но не смог найти примеры как таковые. Если какие-либо предложения и идеи о том, как сделать и добиться цели, пожалуйста, помогите достичь этого.

Спасибо.

1 Ответ

1 голос
/ 02 февраля 2012

Люди в Pub Nub любезно включили мой код в примеры на своем веб-сайте, если приведенный ниже код не работает Перейти к http://www.pubnub.com/blog/easy-mobile-chat-html5-jquery-mobile

Этот HTML-код будет работать прямо из коробки вбраузер (вам не нужен сервер - полезно для мобильных веб-приложений)

например.Создайте файл с приведенным ниже html на вашем диске c: c: \ temp \ chat.html.Затем укажите в браузере Chrome файл: /// C: /temp/chat.html.Или загрузите html на хост.Затем наведите указатель на iphone, android или PC на URL и отпустите челюсть.мобильный - на мобильный телефон в ПК-чат!Это работает исключительно в js-клиенте, вам не нужен ваш собственный сервер

Обратите внимание, это открытый демонстрационный канал чата, для получения более подробной информации перейдите по ссылке 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>
...