最近研究win8 metro也就是win8 app store里面的应用,发现metro原来就是一个前台展示,由于没有iis,没有.netFramework框架,在vs2012中开发链接数据库操作非常的困难,想要链接数据库,完全没有开发C# .net那么轻松,遥想当年,用一句Sqlcommand就能横行天下,第一次接触metro这种完全没有后台动态语言的应用,真是智商捉急啊。
想开发WIN8 APP的孩子们可以多关注一下msdn链接给下:http://msdn.microsoft.com/zh-CN/windows/apps/;更详细的链接给下:http://msdn.microsoft.com/zh-cn/library/windows/apps/br229565.aspx.由于国内市面上关于win8 appstore的书简直太少,即使是仅有的几本书,主要还是应用xaml+c#的开发语言。对于xaml使用并不是很顺畅的我,只能选择html+js+css的开发路径,于是参考资料少的可怜。于是百度,谷歌。发现谷歌要比百度好多了,谷歌不愧是靠pagerank混的,这点百度的竞价体制真是太烦人了。
一开始想进行数据库操作,发现完全没有数据库操作的途径,所以只能用网络通信的方式,问了旁边实验室的娃,得知ajax比较适用,但是由于对ajax实在还不熟,而且也不确定win8app store里面对ajax支持的程度到底有多好,于是应用了html里面原生的websocket通信方式,来解决从后台向前台传数据的问题。关于websocket,网站上有不少的通信协议解释,在这里就不赘述了,给个链接:http://ued.sina.com.cn/?p=900。(说实话,除了上面的原理还能明白,下面的代码完全不知道写哪。。。我水平就是个菜,勿喷。)
好了不多说,这篇文章是来说websocket的,由于html5的盛行,websocket能够做关于实时从后台向前台传数据的操作,非常的棒,类似实时股票分析的应用。
首先websocket需要服务器端和客户端,这个和普通的socket相似。但是通信协议完全是凌驾在web服务器上的,需要web服务器的支持。
先说服务器端:主流有1 nodjs+js,
2 tomcat7+jdk1.7+java(我用)
3 glassfish+java+jdk1.7
4 (记得看别人写的还有一种,大家可以自己去搜,百度前几个准有)
由于对别的不熟,就决定用tomcat7+jdk1.7
注意:一定是tomcat7 因为6还没有支持websocket的开发,所以一定要用7
开发ide:选用eclipse
于是这是一个eclipse下jdk1.7+tomcat7的一个webservice
闲话不多说,有图有证据
新建一个servlet
代码如下:
package websocket.chat;
import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;
import java.util.Set;
import java.util.concurrent.CopyOnWriteArraySet;
import java.util.concurrent.atomic.AtomicInteger;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import org.apache.catalina.websocket.MessageInbound;
import org.apache.catalina.websocket.StreamInbound;
import org.apache.catalina.websocket.WebSocketServlet;
import org.apache.catalina.websocket.WsOutbound;
@WebServlet("/ChatWebSocketServlet")
public class ChatWebSocketServlet extends WebSocketServlet {
private static final long serialVersionUID = 1L;
private static final String GUEST_PREFIX = "Guest";
//用于自动生成连接ID
private final AtomicInteger connectionIds = new AtomicInteger(0);
//用于保存所有连接Inbound的集合
private final Set<ChatMessageInbound> connections =
new CopyOnWriteArraySet<ChatMessageInbound>();
//生成新的连接Inbound,WebSocketServlet必须实现该方法
@Override
protected StreamInbound createWebSocketInbound(String subProtocol,
HttpServletRequest request) {
return new ChatMessageInbound(connectionIds.incrementAndGet());
}
//聊天消息处理类
private final class ChatMessageInbound extends MessageInbound {
private final String nickname;
private ChatMessageInbound(int id) {
this.nickname = GUEST_PREFIX + id;
}
//创建新的连接时触发
@Override
protected void onOpen(WsOutbound outbound) {
connections.add(this);
String message = String.format("* %s %s",
nickname, "has joined.");
broadcast(message);
}
//关闭连接时触发
@Override
protected void onClose(int status) {
connections.remove(this);
String message = String.format("* %s %s",
nickname, "has disconnected.");
broadcast(message);
}
//发送二进制消息时触发
@Override
protected void onBinaryMessage(ByteBuffer message) throws IOException {
throw new UnsupportedOperationException(
"Binary message not supported.");
}
//发送文本消息时触发
@Override
protected void onTextMessage(CharBuffer message) throws IOException {
// Never trust the client
String filteredMessage = String.format("%s: %s",
nickname, message.toString());
broadcast(filteredMessage);
}
//该方法向所有活动连接发送文本信息
private void broadcast(String message) {
for (ChatMessageInbound connection : connections) {
try {
CharBuffer buffer = CharBuffer.wrap(message);
connection.getWsOutbound().writeTextMessage(buffer);
} catch (IOException ignore) {
}
}
}
}
}
下面再建立一个html页面
在下!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
input#chat {
width: 410px
}
#console-container {
width: 400px;
}
#console {
border: 1px solid #CCCCCC;
border-right-color: #999999;
border-bottom-color: #999999;
height: 170px;
overflow-y: scroll;
padding: 5px;
width: 100%;
}
#console p {
padding: 0;
margin: 0;
}
</style>
<script type="text/javascript">
var Chat = {};
Chat.socket = null;
Chat.connect = (function(host) {
if ('WebSocket' in window) {
Chat.socket = new WebSocket(host);
} else if ('MozWebSocket' in window) {
Chat.socket = new MozWebSocket(host);
} else {
Console.log('Error: WebSocket is not supported by this browser.');
return;
}
//建立连接触发事件
Chat.socket.onopen = function () {
Console.log('Info: WebSocket connection opened.');
document.getElementById('chat').onkeydown = function(event) {
if (event.keyCode == 13) {
Chat.sendMessage();
}
};
};
//关闭连接触发事件
Chat.socket.onclose = function () {
document.getElementById('chat').onkeydown = null;
Console.log('Info: WebSocket closed.');
};
//接收消息触发事件
Chat.socket.onmessage = function (message) {
Console.log(message.data);
};
});
//初始化聊天对象方法,注意URL中的项目名称和Servlet名称
Chat.initialize = function() {
if (window.location.protocol == 'http:') {
Chat.connect('ws://' + window.location.host + '/webchat/ChatWebSocketServlet');
} else {
Chat.connect('wss://' + window.location.host + '/webchat/ChatWebSocketServlet');
}
};
//发送聊天信息方法
Chat.sendMessage = (function() {
var message = document.getElementById('chat').value;
if (message != '') {
Chat.socket.send(message);
document.getElementById('chat').value = '';
}
});
var Console = {};
//显示消息记录
Console.log = (function(message) {
var console = document.getElementById('console');
var p = document.createElement('p');
p.style.wordWrap = 'break-word';
p.innerHTML = message;
console.appendChild(p);
while (console.childNodes.length > 25) {
console.removeChild(console.firstChild);
}
console.scrollTop = console.scrollHeight;
});
Chat.initialize();
</script>
</head>
<body>
<div>
<p>
<input type="text" placeholder="type and press enter to chat" id="chat">
</p>
<div id="console-container">
<div id="console"></div>
</div>
</div>
</body>
</html>
好了,运行吧