WebSocket簡介
WebSocket是HTML5開始提供的一種瀏覽器與服務器間進行全雙工通訊的網絡技術。依靠這種技術可以實現客戶端和服務器端的長連接,雙向實時通信。
特點:
事件驅動
異步
使用ws或者wss協議的客戶端socket
能夠實現真正意義上的推送功能
缺點:
少部分瀏覽器不支持,瀏覽器支持的程度與方式有區別。
下面進行代碼和圖解:
我現在使用idea進行創建一個項目,下面會給實例項目
簡單介紹WebSocket客戶端服務器端
WebSocket客戶端
websocket允許通過JavaScript建立與遠程服務器的連接,從而實現客戶端與服務器間雙向的通信。在websocket中有兩個方法:
1、send() 向遠程服務器發送數據
2、close() 關閉該websocket鏈接
websocket同時還定義了幾個監聽函數
1、onopen 當網絡連接建立時觸發該事件
2、onerror 當網絡發生錯誤時觸發該事件
3、onclose 當websocket被關閉時觸發該事件
4、onmessage 當websocket接收到服務器發來的消息的時觸發的事件,也是通信中最重要的一個監聽事件。msg.data
websocket還定義了一個readyState屬性,這個屬性可以返回websocket所處的狀態:
1、CONNECTING(0) websocket正嘗試與服務器建立連接
2、OPEN(1) websocket與服務器已經建立連接
3、CLOSING(2) websocket正在關閉與服務器的連接
4、CLOSED(3) websocket已經關閉了與服務器的連接
websocket的url開頭是ws,如果需要ssl加密可以使用wss,當我們調用websocket的構造方法構建一個websocket對象(new WebSocket(url))的之后,就可以進行即時通信了。
我使用的是idea進行演示
簡單的聊天

客戶端代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width" /> <title>聊天室</title> </head> <style> body{text-align: center;} #div1{width:802px;height: 500px;border:1px solid red;margin: auto} #cs{width:650px;height: 350px;border:1px solid red;float: left;} #cs2{width: 148px;height: 350px;border: 1px solid red;float: left;} p{text-align: left} #ss{ height: 109px; width: 796px;} #cs,#cs2{OVERFLOW: auto;} #btnSend{float: right;width: 100px;height: 30px;} </style> <body> <h2>小小聊天室</h2> <input type="button" id="btnConnection" value="打開連接" /> <input type="button" id="btnClose" value="關閉連接" /> <div id="div1"> <div id="cs" ></div> <div id="cs2"></div> <textarea id="ss"></textarea> <br/> <input type="button" id="btnSend" value="發送" /> </div> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var socket; if(typeof(WebSocket) == "undefined") { console.log("您的瀏覽器不支持WebSocket"); } $("#btnSend").attr("disabled","disabled");//禁用 $("#btnClose").attr("disabled","disabled");//禁用 var name; $("#btnConnection").click(function() { name= prompt("請輸入發送的名稱:"); if(name!=null){ $("#btnConnection").attr("disabled","disabled");//禁用 //實現化WebSocket對象,指定要連接的服務器地址與端口 //socket = new WebSocket("ws://169.254.105.218:8080/ws/"+name); //本機 socket = new WebSocket("ws://localhost/ws/"+name); //打開事件 socket.onopen = function() { $("#btnSend").attr("disabled","");//禁用 $("#btnClose").attr("disabled","");//禁用 $("#cs2").append($("<p/>").html(name+":連接成功")); }; //獲得消息事件 socket.onmessage = function(msg) { $("#cs").append($("<p/>").html(msg.data)); }; //關閉事件 socket.onclose = function() { $("#btnSend").attr("disabled","disabled");//禁用 $("#btnConnection").attr("disabled","");//禁用 $("#btnClose").attr("disabled","disabled");//禁用 $("#cs2").append($("<p/>").html(name+":已關閉")); }; //發生了錯誤事件 socket.onerror = function() { $("#cs2").append($("<p/>").html("已關閉發生了錯誤")); } } }); //發送消息 $("#btnSend").click(function() { socket.send(document.getElementById("ss").value); $("#ss").val(""); }); //關閉 $("#btnClose").click(function() { socket.close(); }); </script> </body> </html>
WebSocket服務器端
JSR356定義了WebSocket的規范,Tomcat7中實現了該標准。JSR356 的 WebSocket 規范使用 javax.websocket.*的 API,可以將一個普通 Java 對象(POJO)使用 @ServerEndpoint 注釋作為 WebSocket 服務器的端點。
服務器代碼如下:
package com; import java.io.IOException; import java.util.HashMap; import java.util.HashSet; import java.util.Map; import java.util.Set; import javax.websocket.CloseReason; import javax.websocket.OnClose; import javax.websocket.OnError; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.server.PathParam; import javax.websocket.server.ServerEndpoint; @ServerEndpoint("/ws/{user}") public class SServlet { private String currentUser; private static Set<Session> sessions = new HashSet<>(); //連接打開時執行 @OnOpen public void onOpen(@PathParam("user") String user, Session session) { currentUser = user; //System.out.println("Connected ... " + session.getId()); sessions.add(session); System.out.println(user); } //收到消息時執行 @OnMessage public String onMessage(String message, Session session) throws IOException { System.out.println(currentUser + ":" + message); //發送給所有人 for (Session s : sessions) { if (s.isOpen()) { s.getBasicRemote().sendText(currentUser+"說:"+message); } } return null; } //連接關閉時執行 @OnClose public void onClose(Session session, CloseReason closeReason) { System.out.println(String.format("Session %s closed because of %s", session.getId(), closeReason)); } //連接錯誤時執行 @OnError public void onError(Throwable t) { t.printStackTrace(); } }
需要引用websocket包:官網地址:https://mvnrepository.com/artifact/javax.websocket/javax.websocket-api
或者直接下載

項目實例和包地址:https://github.com/weibanggang/Message_push

