使用jquerymobile web应用框架的聊天应用
在我之前的问题中，我问到如何使用客户端技术实现聊天功能，尤其是使用jquery mobile。我也在jquery移动论坛上提出了这个问题，但我很失望。最后，我能够通过引用这个blog在我的本地机器上设置聊天功能
我正在运行jsJac客户端聊天，但现在我正在使用jquery移动框架实现相同的事情，我搜索了一下，并试图弄清楚如何做到这一点，但找不到任何这样的例子。如果有任何关于如何做和完成事情的建议和想法，请帮助实现这一点。
谢谢。
回答 1
Stack Overflow用户
发布于 2012-02-02 20:55:23
pub nub的人很友好地将我的代码合并到他们网站上的示例中，如果下面的代码在http://www.pubnub.com/blog/easy-mobile-chat-html5-jquery-mobile上不起作用
这个html可以直接在浏览器中直接使用(你不需要服务器--对移动web应用很有用)
例如：在您的c: drive c:\temp\chat.html上使用以下html创建一个文件。然后将您的chrome浏览器指向file:///C:/temp/chat.html.或者，将html上传到主机。然后将iphone、android或PC浏览器指向url，让你的下巴掉下来。移动端-移动端到pc端聊天！这完全是在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>https://stackoverflow.com/questions/7316186
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号