jeecg集成实现websocket
? ? jeecg集成實現websocket在線聊天功能，使用layim作為在線聊天ui框架，java的websocket作為后臺服務。
? ? 在jeecg各風格的首頁引入layui.jsp這個文件為當前風格引入在線聊天功能，確保在jquery后引入，layim框架依賴于jquery。
? ? ?<%@include file="/context/layui.jsp"%>
? ? 在layui.jsp中引入了如下三個文件，layui.css和layui.js分別是layui框架的css和js資源文件。config.js是實現在線聊天的配置文件。
? ? <link rel="stylesheet" href="content/chat/layui/css/layui.css">
? ? <script src="content/chat/layui/layui.js"></script>
? ? <script src="plug-in/layim/config.js"></script>
? ? 后臺服務通過jeecg-p3插件方式引入jeecg
? ? <dependency>
? ? ? ?<groupId>org.p3framework</groupId>
? ? ? ?<artifactId>jeecg-p3-biz-chat</artifactId>
? ? ? ?<version>1.0.0</version>
? ? ? ?<type>jar</type>
? ? ? ?<scope>compile</scope>
? ? </dependency>
?
? ? 當用戶登錄jeecg系統時，會通過js的WebSocket和后臺建立連接，首次連接是通過http方式、進行，后續消息發送通過tcp/ip方式。
? ? var socket = new WebSocket("ws://"+chatIp+":8080/jeecg/WebSocket/"+id);
? ? chatIp為當前服務器ip地址，id是當前登錄用戶的id標識，用來唯一區分連接用戶。
?
? ? 后臺通過一個靜態的map來存放連接用戶的id和websocket對象，維護id和websocket對象的關系，用以后續消息的定向發送。
? ? ? private static Map<String,WebSocket> webSocketHashMap = new HashMap<String, WebSocket>();
? ? 后臺的WebSocket處理類中主要有幾個方法：
? ? ? onOpen??連接建立成功調用的方法
? ? ? onClose 連接關閉調用的方法
? ? ? onMessage 收到客戶端消息后調用的方法
? ? ? onError 發生錯誤時調用
?
? ? 聊天功能初始化時獲得分組后的用戶列表
? ? ? init: {
? ? ? ? ??//url: '$!{basePath}/content/chat/demo/json/getList.json'
? ? ? ? ??url: 'chat/imController.do?getUsers'
? ? ? ? ??,data: {}
? ? ? }
? ? ? ?
?
? ? admin想向test1發送信息，雙擊打開test1對話框。
? ? ?
? ? ?
? ? 在test1的頁面上會受到的信息提醒。
?
? ? 點開后就可以看到對話信息，雙方就可以進行交流了。
?
? ? 這樣的一個過程中，內部實現的方式是這樣的。
? ? 發送消息的時候，js中會監聽到發送信息的請求。
? ? ? layim.on('sendMessage', function(data){
? ? ? ? ??console.log(data);
? ? ? ? ??var mine = data.mine;
? ? ? ? ??var to = data.to;
? ? ? ? ??console.log(data);
? ? ? ? ??//更多情況下，一般是傳遞一個對象
? ? ? ? ??socket.send(JSON.stringify({
? ? ? ? ? ? ??type: 'friend' //隨便定義，用于在服務端區分消息類型
? ? ? ? ? ? ??,data: {"msg":mine.content,"from":mine.id,"to":to.id,"fromName":mine.username,"toName":to.username}
? ? ? ? ? }));
? ? ?});
? ? 方法接受一個參數，參數中有mine，to等參數，可以得到發送人和接收人的信息，調用socket.send方法就可以將信息發送給后臺。后臺的接收方法會得到這個請求。
? ? /**
? ? ?* 收到客戶端消息后調用的方法
? ? ?*
? ? ?* @param message 客戶端發送過來的消息
? ? ?* @param session 可選的參數
? ? ?*/
? ? @OnMessage
? ? public void onMessage(String message, Session session) {
? ? ? ? System.out.println("來自客戶端的消息:" + message);
? ? ? ? JSONObject json = JSON.parseObject(message);
? ? ? ? JSONObject jsonObject = (JSONObject) json.get("data");
? ? ? ? String to = jsonObject.get("to").toString();
? ? ? ? String from = jsonObject.get("from").toString();
? ? ? ? String msg = jsonObject.get("msg").toString();
? ? ? ? String type = json.get("type").toString();
????try{
????????for(String key: webSocketHashMap.keySet()){
????????????if(key.equals(to)){
????????????????webSocketHashMap.get(key).sendMessage(message);
????????????}
????????}
????}catch (Exception e){
????????e.printStackTrace();
????}
}
? ? 解析出接收人id，然后對當前連接的websocket關系集合進行遍歷得到接收人的websocket對象，對這個websocket對象進行信息的發送。
? ? 信息發送后，test1頁面上js可以監聽到收到的信息。
//監聽收到的消息
socket.onmessage = function(res){
????var json = JSON.parse(res.data);
????var timestamp = new Date().getTime();
????layim.getMessage({
????????username: json.data.fromName //消息來源用戶名
????????,avatar: "http://tp1.sinaimg.cn/1571889140/180/40030060651/1" //消息來源用戶頭像
????????,id: json.data.from //聊天窗口來源ID（如果是私聊，則是用戶id，如果是群聊，則是群組id）
????????,type: "friend" //聊天窗口來源類型，從發送消息傳遞的to里面獲取
????????,content: json.data.msg //消息內容
????????,timestamp: timestamp //服務端動態時間戳
????});
};
? ? 通過這種方式可以將接收到的信息顯示到對話框上。
總結
以上是生活随笔為你收集整理的jeecg集成实现websocket的全部內容，希望文章能夠幫你解決所遇到的問題。
