標籤：websocket java tomcat
1、前言一直沒有怎麼做過前端的東西，但是最近的項目中，前端人員奇缺，公司又不安排新的人員進入，所以我這個後台開發人員只能拉過來坐前端了，前段的東西感覺一大堆，CSS，js自不必說，HTML生態圈就有很多的技術要去學習，好吧，那就一個一個的學習整理啦，先來說說最近這個項目的前端用到什麼技術吧。
1、Restful：DropWizard這個很簡單，兩Apsara Infrastructure Management Framework本上就能拿下
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）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
