一直没有怎么做过前端的东西，但是最近的项目中，前端人员奇缺，公司又不安排新的人员进入，所以我这个后台开发人员只能拉过来坐前端了，前段的东西感觉一大堆，CSS，js自不必说，HTML生态圈就有很多的技术要去学习，好吧，那就一个一个的学习整理啦，先来说说最近这个项目的前端用到什么技术吧。
1、Restful：DropWizard这个很简单，两天基本上就能拿下
2、Js Framework ：AngularJS 这个JS库的确很酷，最近学习的过程中越来越喜欢这个东西了，打算以后再整理一些AngularJS的学习笔记和过程
3、前端和后端的通讯的方式不是那种request和response的方式，而是采用HTML5的WebSocket。
4、其他技术我就不一一列举了
在学习websocket的过程中我阅读了一下tomcat的websocket examples当然最重要的是阅读了一本比较不错的系统化的WEBSOCKET书，推荐给大家《JAVA WEBSOCKET PROGRAMMING》然后我尽力将自己学到的东西，尽可能通俗的详细地介绍一下，方便和大家交流。
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<parent>
<artifactId>websocket</artifactId>
<groupId>websocket</groupId>
<version>1.0-SNAPSHOT</version>
</parent>
<modelVersion>4.0.0</modelVersion>
<artifactId>websocket-anotation</artifactId>
<packaging>war</packaging>
<name>websocket-anotation Maven Webapp</name>
<url>http://maven.apache.org</url>
<dependencies>
<dependency>
<groupId>javax.websocket</groupId>
<artifactId>javax.websocket-api</artifactId>
<version>1.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<finalName>websocket-anotation</finalName>
</build>
</project>
其中我们引入了javax websocket的标准api接口，并且将其的scope设置成provided（tomcat容器已经自带了这个包，我们不需要重复发布，指定为provided的目的就是为了在编写代码的过程中使用而已）。package com.wangwenjun.websocket.annotation;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
@ServerEndpoint(value = "/hello")
public class HelloWorldServer {
@OnMessage
public String sayHello(String incomingMessage) {
return "I got this(" + incomingMessage + ") so I am sending it back to you!";
}
@OnOpen
public void open(Session session) {
System.out.println("On Open---" + session.getBasicRemote());
}
@OnClose
public void close() {
System.out.println("Close.");
}
}其实这个例子中只要有一个方法被@OnMessage注解即可，其他的open和close 暂时可以忽略掉，Websocket的方式不仅可以和服务段传递文本信息也可以交互二进制的形式(InputStream)，不仅可以返回字符串，也可以返回二进制流（OutputStream），而且还可以得到整个回话的引用如Session，也就意味着我们下面的方法都是合理的@OnMessage
public void test1(String test){
//do nothing.
}
@OnMessage
public void test2(InputStream inputStream){
//do nothing.
}
@OnMessage
public OutputStream test3(InputStream inputStream){
//do nothing.
return null;
}
@OnMessage
public void test4(String text,Session session){
//do nothing.
} 等等诸如此类吧，都是可行的，好了我们说会刚才那个方法sayHello，该方法接受一个文本字符串，并且返回一个文本字符串，注解为OnMessage，表示它接受来自客户端的信息并且处理之。<!DOCTYPE HTML>
<html>
<head>
<title>WebSocket Learning Example(Hello World)</title>
<script type="text/javascript">
var ws;
function init() {
outputArea = document.getElementById("output");
}
function sayHello() {
var url = "ws://localhost:8080/websocket-anotation/hello";
writeMessageToScreen("Connecting to " + url);
ws = new WebSocket(url);
ws.onopen = function (event) {
writeMessageToScreen("Connected.");
var message=document.getElementById("message").value;
doSend(message);
}
ws.onmessage = function (event) {
writeMessageToScreen("Received message: " + event.data);
ws.close();
}
ws.onerror = function (event) {
writeMessageToScreen("Occur Error:<span style='color:red'>" + event.data + "</span>");
ws.close();
}
}
function doSend(message) {
ws.send(message);
writeMessageToScreen("Sent message: " + message);
}
function writeMessageToScreen(message) {
var p = document.createElement("p");
p.style.wordWrap = "break-word";
p.innerHTML = message;
outputArea.appendChild(p);
}
this.addEventListener("load", init, false);
</script>
</head>
<body>
<h1>Hello World Server</h1>
<div style="text-align:left">
<form action="#">
<input type="text" id="message" placeholder="Please enter your name."/>
<input type="button" id="sender" value="PressMeToSend" onclick="sayHello()"/>
</form>
</div>
<div id="output">
</div>
</body>
</html>//method 1
if(window.WebSocket){
}
//method 2
if("WebSocket" in window)
{
}
//method 3
if(window["WebSocket"]){
}好了，我们来说一下上面JS代码中的几个关键部分吧var url = "ws://localhost:8080/websocket-anotation/hello";定义了Websocket ServerEndpoint的地址，记住协议是WS哦，不要像我一样第一次学习的习惯性的用http，最后的那个URI/hello是我们在我们的HelloWorldServer中用@ServerEnmdpoint注解的Value值，应该不难理解吧。
ws = new WebSocket(url);创建一个WebSocket的对象，如果能够创建成功就可以使用我们的WebSocket了，不过更加严谨的做法应该是像我在前面所说的那样应该判断JS宿主环境是否支持WebSocket，否则下面的代码都会出现错误的。
ws.onopen = function (event) {
writeMessageToScreen("Connected.");
var message=document.getElementById("message").value;
doSend(message);
}
ws.onmessage = function (event) {
writeMessageToScreen("Received message: " + event.data);
ws.close();
}
ws.onerror = function (event) {
writeMessageToScreen("Occur Error:<span style='color:red'>" + event.data + "</span>");
ws.close();
}ws.send(message);
WebSocket Java Programming入门-1（annotated）
原文地址：http://blog.csdn.net/wangwenjun69/article/details/45967849
