websocket是Html5的一個協議,也就是說距離我們2016年就幾年時間,其他原理我就不說了,直接講例子
一、準備材料:1、一個開發工具必須支援javaEE7的,原因是javaEE6或以下不支援websocket,我是使用的開發工具是myeclipse2015,這裡給各位百度雲盤
連結: https://pan.baidu.com/s/1eS3DrPK 密碼: 4fe1,裡面有破解的工具,很方便
2、tomcat8.0以上、JDK7.0以上(這個也許就是websocket是近幾年的原因)
二、建立一個web專案,必須選擇JavaEE7.0以上(圖1-1)
圖1-1
三、
(1)、jsp程式碼
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <meta content="text/html";charset="utf-8"> <script src="<%=request.getContextPath()%>/js/jquery-2.1.4.min.js" ></script> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <body> <form> <h1>WebSocket送信例項</h1> <input type="text" id="message" disabled="disabled" required> <input type="button" onclick="echo()" disabled="disabled" value="提交"> </form> </body> <script> if (!window.WebSocket && window.MozWebSocket) window.WebSocket = window.MozWebSocket; if (!window.WebSocket) { alert("此瀏覽器不支援WebSocket"); } //建立WebSocket,location.host獲得主機名+埠號 var ws = new WebSocket("ws://" + location.host + "/websocket/websocket"); //連線建立後呼叫的函式 ws.onopen = function() { //將我們的form改變為可以輸入的形式 $("form *").attr("disabled", false); } //接受伺服器傳入的資料的處理 ws.onmessage = function(event) { alert(event.data); } //點選提交按鈕後呼叫的引數 function echo() { ws.send($("#message").val()); } </script> </html>
(2)、java程式碼
package com;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
@ServerEndpoint("/websocket")
public class MyWebSocket {
//靜態變數，用來記錄當前線上連線數。應該把它設計成執行緒安全的。
private static int onlineCount = 0;
//concurrent包的執行緒安全Set，用來存放每個客戶端對應的MyWebSocket物件。若要實現服務端與單一客戶端通訊的話，可以使用Map來存放，其中Key可以為使用者標識
private static CopyOnWriteArraySet<MyWebSocket> webSocketSet = new CopyOnWriteArraySet<MyWebSocket>();
//與某個客戶端的連線會話，需要通過它來給客戶端傳送資料
private Session session;
/**
* 連線建立成功呼叫的方法
* @param session 可選的引數。session為與某個客戶端的連線會話，需要通過它來給客戶端傳送資料
*/
@OnOpen
public void onOpen(Session session){
this.session = session;
webSocketSet.add(this); //加入set中
addOnlineCount(); //線上數加1
System.out.println("有新連線加入！當前線上人數為" + getOnlineCount());
}
/**
* 連線關閉呼叫的方法
*/
@OnClose
public void onClose(){
webSocketSet.remove(this); //從set中刪除
subOnlineCount(); //線上數減1
System.out.println("有一連線關閉！當前線上人數為" + getOnlineCount());
}
/**
* 收到客戶端訊息後呼叫的方法
* @param message 客戶端傳送過來的訊息
* @param session 可選的引數
*/
@OnMessage
public void onMessage(String message, Session session) {
System.out.println("來自客戶端的訊息:" + message);
//群發訊息
for(MyWebSocket item: webSocketSet){
try {
item.sendMessage(message);
} catch (IOException e) {
e.printStackTrace();
continue;
}
}
}
/**
* 發生錯誤時呼叫
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error){
System.out.println("發生錯誤");
error.printStackTrace();
}
/**
* 這個方法與上面幾個方法不一樣。沒有用註解，是根據自己需要新增的方法。
* @param message
* @throws IOException
*/
public void sendMessage(String message) throws IOException{
this.session.getBasicRemote().sendText(message);
//this.session.getAsyncRemote().sendText(message);
}
public static synchronized int getOnlineCount() {
return onlineCount;
}
public static synchronized void addOnlineCount() {
MyWebSocket.onlineCount++;
}
public static synchronized void subOnlineCount() {
MyWebSocket.onlineCount--;
}
}
(3).web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <display-name></display-name> <servlet> <description>This is the description of my J2EE component</description> <display-name>This is the display name of my J2EE component</display-name> <servlet-name>EchoServlet</servlet-name> <servlet-class>com.EchoServlet</servlet-class> </servlet> <servlet> <description>This is the description of my J2EE component</description> <display-name>This is the display name of my J2EE component</display-name> <servlet-name>MyWebSocket</servlet-name> <servlet-class>com.MyWebSocket</servlet-class> </servlet> <servlet-mapping> <servlet-name>EchoServlet</servlet-name> <url-pattern>/servlet/EchoServlet</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>MyWebSocket</servlet-name> <url-pattern>/servlet/MyWebSocket</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> </web-app>
相信大家好好體會程式碼,我也是花了一兩個鍾才做成這個例子的，然後就立刻給部落格友寫文章,喜歡和我交流可以加我的部落格園