功能描述
舉個栗子，我們在瀏覽知乎等之類的網(wǎng)站時，如果有新內(nèi)容更新了，那么在內(nèi)容列表上方會彈出個小框，告訴你有新內(nèi)容更新，你一點擊，列表就更新。
再比如，我想實現(xiàn)論壇一有人發(fā)帖或者管理員改變了帖子的狀態(tài)時，在論壇主頁提醒用戶們帖子內(nèi)容有更新，可以點擊按鈕選擇更新。
新內(nèi)容提醒
實現(xiàn)細節(jié)
- 關于WebSocket的原理可以看這里（建議看原文，我自己總結(jié)的太水。。。）：
WebSocket的原理：WebSocket 是什么原理？為什么可以實現(xiàn)持久連接？
我看后總結(jié)的：WebSocket 是什么原理？為什么可以實現(xiàn)持久連接？（筆記）
- 向所有人廣播：
WSAllController
package controller;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import javax.websocket.*;
import javax.websocket.server.*;
import java.util.Map;
import java.util.Set;
import java.util.concurrent.ConcurrentHashMap;
/**
* Created by 阿越 on 2017/6/6.
*/
@ServerEndpoint("/wsAll")
public class WSAllController {
private static final Logger logger = LoggerFactory.getLogger(WSAllController.class);
public static Map<String, Session> clients = new ConcurrentHashMap<String, Session>();
/**
* 打開連接時觸發(fā)
*
* @param session
*/
@OnOpen
public void onOpen(Session session) {
logger.info("Websocket Start Connecting:" + session.getId());
System.out.println("進入：" + session.getId());
clients.put(session.getId(), session);
}
/**
* 收到客戶端消息時觸發(fā)
*
* @param message
* @return
*/
@OnMessage
public String onMessage(String message) {
return "Got your message (" + message + ").Thanks !";
}
/**
* 異常時觸發(fā)
*
* @param throwable
*/
@OnError
public void onError(Throwable throwable, Session session) {
logger.info("Websocket Connection Exception:" + session.getId());
logger.info(throwable.getMessage(), throwable);
clients.remove(session.getId());
}
/**
* 關閉連接時觸發(fā)
*/
@OnClose
public void onClose(Session session) {
logger.info("Websocket Close Connection:" + session.getId());
clients.remove(session.getId());
}
/**
* 向所有人廣播
*
* @param message
*/
public static void broadcastAll(String message) {
Set<Map.Entry<String, Session>> set = clients.entrySet();
for (Map.Entry<String, Session> i : set) {
try {
i.getValue().getBasicRemote().sendText(message);
} catch (Exception e) {
e.printStackTrace();
}
}
}
}
在處理業(yè)務的代碼上調(diào)用broadcastAll(String message)方法
/**
* 置頂
*
* @param request
* @return
*/
@RequestMapping("/setTop")
public void setTop(...) throws IOException {
...
WebsocketController.broadcastAll("有新內(nèi)容");
...
}
頁面建立連接
<script type="text/javascript">
$(function () {
initSocket();
});
// ----------- webSocket begin -------------
function initSocket() {
var webSocket = null;
window.onbeforeunload = function () {
//離開頁面時的其他操作
};
if (!window.WebSocket) {
console("您的瀏覽器不支持websocket！");
return false;
}
var target = 'ws://' + window.location.host + "/wsAll";
if ('WebSocket' in window) {
webSocket = new WebSocket(target);
} else if ('MozWebSocket' in window) {
webSocket = new MozWebSocket(target);
} else {
alert('WebSocket is not supported by this browser.');
return;
}
// 收到服務端消息
webSocket.onmessage = function (msg) {
alert(msg);
// 關閉連接
webSocket.onclose();
console.log(msg);
};
// 異常
webSocket.onerror = function (event) {
console.log(event);
};
// 建立連接
webSocket.onopen = function (event) {
console.log(event);
};
// 斷線
webSocket.onclose = function () {
console.log("websocket斷開連接");
};
}
// ----------- webSocket end -------------
</script>
- 向特定的客戶廣播：
WSOneController
package controller;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import javax.websocket.*;
import javax.websocket.server.*;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
/**
* Created by 阿越 on 2017/6/6.
*/
@ServerEndpoint("/wsOne/{myWebsocket}")
public class WSOneController {
private static final Logger logger = LoggerFactory.getLogger(WSOneController.class);
public static Map<String, Session> clients = new ConcurrentHashMap<String, Session>();
/**
* 打開連接時觸發(fā)
*
* @param myWebsocket
* @param session
*/
@OnOpen
public void onOpen(@PathParam("myWebsocket") String myWebsocket, Session session) {
logger.info("Websocket Start Connecting:" + myWebsocket);
System.out.println("進入：" + myWebsocket);
clients.put(myWebsocket, session);
}
/**
* 收到客戶端消息時觸發(fā)
*
* @param message
* @return
*/
@OnMessage
public String onMessage(String message) {
return "Got your message (" + message + ").Thanks !";
}
/**
* 異常時觸發(fā)
*
* @param myWebsocket
* @param throwable
*/
@OnError
public void onError(@PathParam("myWebsocket") String myWebsocket, Throwable throwable) {
logger.info("Websocket Connection Exception:" + myWebsocket);
logger.info(throwable.getMessage(), throwable);
clients.remove(myWebsocket);
}
/**
* 關閉連接時觸發(fā)
*
* @param myWebsocket
*/
@OnClose
public void onClose(@PathParam("myWebsocket") String myWebsocket) {
logger.info("Websocket Close Connection:" + myWebsocket);
clients.remove(myWebsocket);
}
/**
* 異步的方式將數(shù)據(jù)傳回客戶端
*
* @param myWebsocket
* @param message
*/
public static void broadcast(String myWebsocket, String message) {
if (clients.containsKey(myWebsocket)) {
clients.get(myWebsocket).getAsyncRemote().sendText(message);
} else {
throw new NullPointerException("[" + myWebsocket + "]Connection does not exist");
}
}
}
在處理業(yè)務的代碼上調(diào)用broadcast(String myWebsocket, String message)方法，假設此時的myWebsocket是post（帖子）
/**
* 置頂
*
* @param request
* @return
*/
@RequestMapping("/setTop")
public void setTop(...) throws IOException {
...
WebsocketController.broadcast("post","有新內(nèi)容");
...
}
頁面建立連接
<script type="text/javascript">
$(function () {
initSocket("post");
});
// ----------- webSocket begin -------------
function initSocket(myWebsocket) {
var webSocket = null;
window.onbeforeunload = function () {
//離開頁面時的其他操作
};
if (!window.WebSocket) {
console("您的瀏覽器不支持websocket！");
return false;
}
var target = 'ws://' + window.location.host + "/wsAll/" + myWebsocket;
if ('WebSocket' in window) {
webSocket = new WebSocket(target);
} else if ('MozWebSocket' in window) {
webSocket = new MozWebSocket(target);
} else {
alert('WebSocket is not supported by this browser.');
return;
}
// 收到服務端消息
webSocket.onmessage = function (msg) {
alert(msg);
// 關閉連接
webSocket.onclose();
console.log(msg);
};
// 異常
webSocket.onerror = function (event) {
console.log(event);
};
// 建立連接
webSocket.onopen = function (event) {
console.log(event);
};
// 斷線
webSocket.onclose = function () {
console.log("websocket斷開連接");
};
}
// ----------- webSocket end -------------
</script>
結(jié)果展示
初始列表：
初始列表
用戶發(fā)帖或管理員修改帖子后（比如，我們把帖子“測試ayue”的加精狀態(tài)去掉）：
新內(nèi)容提醒
點擊“有新內(nèi)容”按鈕，進行列表更新（注意整個網(wǎng)頁是沒刷新，只有列表這部分刷新而已）：
更新列表中
列表更新完畢
可以看到，帖子“測試ayue”的加精狀態(tài)已經(jīng)去掉了。
如果覺得文章對您有用，麻煩點擊關注和喜歡，感謝支持！
