javascript 使用 jquerymobile Web 应用程序框架的聊天应用程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7316186/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chat app using jquerymobile web app framework
提问by Jeevan Dongre
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
我之前的问题我问过如何使用客户端技术尤其是使用 jquery mobile 来实现聊天功能。我也在 jquery 移动论坛上提出了这个问题，但我很失望。最后我能够通过参考这个博客在我的本地机器上设置一个聊天功能
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.
我正在运行 jsJac 客户端聊天，但现在我使用 google 搜索的 jquery 移动框架工作实现了同样的事情，并试图弄清楚它是如何完成的，但找不到任何这样的例子。如果有关于如何做和完成事情的任何建议和想法，请帮助实现这一目标。
Thank you.
谢谢你。
采纳答案by ozmike
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
如果下面的代码不起作用，请 pub nub 的人们将我的代码合并到他们网站上的示例中，请转到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)
此 html 将直接在浏览器中开箱即用（您不需要服务器 - 对移动网络应用程序很有用）
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
例如。在您的 c: 驱动器 c:\temp\chat.html 上创建一个包含以下 html 的文件。然后将您的 chrome 浏览器指向 file:///C:/temp/chat.html。或者将 html 上传到主机。然后将 iphone 或 android 或 PC 浏览器指向 url，让你的下巴掉下来。手机 - 手机到电脑聊天！这纯粹在 js 客户端中运行，您不需要自己的服务器
Note, this is a open demo chat channel, goto pub nub for more details http://www.pubnub.com
请注意，这是一个开放的演示聊天频道，请转到 pub nub 了解更多详情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>
