websocket 加layim實現在線聊天系統

實現流程：

　　1.瀏覽器連接服務器時保存所有用戶id以及對應的唯一session（session用戶用戶消息推送）。

　　　　1.1:判斷登錄用戶是否有離線消息（個人消息以及群消息），有則將離線消息進行推送給登錄用戶。

 

　　2.前端layim監聽消息發送，監聽到通過websocket send方法將消息對象發送至服務器

　　3.服務器接收到消息，通多消息對象獲取接收者id，通過接收者id獲取唯一session。

　　　　3.1: 個人聊天可先判斷用戶是否在線，如果在線可直接通過接受者id進行消息推送，如果不在線就保存消息，待接收者上線時將此消息推送給接受者。

　　　　3.2: 群消息通過群id獲取所有群成員，循環如果在線則發送消息，不在線保存消息。待接收者上線時將消息推送給消息接收者。

　　4.服務器通過session進行消息推送

java

package com.healta.controller;

import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;


import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import com.healta.chat.vo.User;
import com.jfinal.plugin.activerecord.Record;

//與js代碼 new ReconnectingWebSocket("ws://IP地址:端口號/項目根路徑/websocket配置的路徑/" + 傳的參數，可多個)對應
@ServerEndpoint("/websocket/{userId}")
public class WebSocketController {
	
	public static Map<Integer, User> userMap = new HashMap<>();//保存在線用戶

	public static List<Integer> onLineUserIdList = new ArrayList<>();//保存在線的用戶id
	public static User user;
	
	
	/**
	 * 瀏覽器連服務器時觸發此方法
	 * @param session
	 * @param userId
	 */
	@OnOpen
	public void onOpen(Session session, @PathParam("userId") Integer userId) {
		/**
		 * 判斷當前連接用戶是否在線
		 */
		if(!checkOnLineState){//用戶上線保存用戶唯一session以及保存用戶id，可通過用戶id獲取session
			user = new User();
			user.setUserSession(session);
			user.setUserOnLineType(true);
			userMap.put(userId, user);
			onLineUserIdList.add(userId);
		}
		
		//往下可根據不同的需求寫相應的邏輯代碼，比如離線消息就可以在用戶連接服務器時去進行消息推送。或者用戶上線提醒。
		
	}

	/**
	 * 連接關閉會觸發此事件
	 * @param session
	 * @param userId
	 */
	@OnClose
	public void onClose(Session session, @PathParam("userId") Integer userId) {
　　　　　　　　　　//用戶下線需要將對於的在線用戶進行調整。
		onLineUserIdList.remove(userId);
		userMap.remove(userId);
		//用戶下線可以給前端推送一個下線消息，前端接收把好友置灰
	}

	/**
	 * 服務器收到消息時觸發此方法
	 * @param requestJson
	 * @param session
	 * @param userId
	 */
	@OnMessage
	public void onMessage(String requestJson, Session session, @PathParam("userId") Integer userId) {
		
		//此處通過requestJson消息對象可獲取收信人id或者群id
		JSONObject messageObject = JSONObject.parseObject(requestJson);
		String jsonCollectUserId = messageObject.getString("collectUserId");//消息接收者可以是群id也可以是用戶id
		String jsonContent = messageObject.getString("content");//消息內容

		try {
			//通過收件人id獲取連接session進行消息推送
			userMap.get(收信人id或者群id).getUserSession().getBasicRemote().sendText("消息字符串，用layim的話需要和layim的消息接收類型一致。");
		} catch (IOException e) {
			e.printStackTrace();
		}
		
	}
}

　　

js

<script>
    layui.use('layim', function(layim){
        var copyLayim = layim;
        var websocket = null; 
        //判斷當前瀏覽器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new ReconnectingWebSocket("ws://IP地址:端口號/項目根路徑/websocket配置的路徑/" + 傳的參數，可多個);
        } else {
            alert('當前瀏覽器 Not support websocket')
        }
        //連接發生錯誤的回調方法
                websocket.onerror = function() {}; 
        //連接成功建立的回調方法
                websocket.onopen = function() {}
        //接收到消息的回調方法
        websocket.onmessage = function(event) {
            var data = event.data;//服務器返回的消息，前端頁面可以根據不同的消息做不同的操作。
                    
        }
        //連接關閉的回調方法
        websocket.onclose = function() {
        //    setMessageInnerHTML("WebSocket連接關閉");
        }
        //監聽窗口關閉事件，當窗口關閉時，主動去關閉websocket連接，防止連接還沒斷開就關閉窗口，server端會拋異常。
        window.onbeforeunload = function() {
            closeWebSocket();
        } 
        //將消息顯示在網頁上
        function setMessageInnerHTML(innerHTML) {
        //    document.getElementById('message').innerHTML += innerHTML + '<br/>';
        }
        //關閉WebSocket連接
        function closeWebSocket() {
            websocket.close();
        } 
        //發送消息
        function send(msg) {
            websocket.send(msg);
        }
        
        layim.config({
            brief: false, //是否簡約模式（如果true則不顯示主面板）
            init: {
                url: '基本數據獲取接口(格式layui官網有提供)'
                ,data: {'userId': userId}
            },
            members: {
                url: '返回群成員接口',
            }, 
            uploadImage: {
                  url: '圖皮上傳接口'
            } ,
            chatLog:  '跳轉至聊天界面url' ,
        });
        
        //layim消息發送監聽器
        layim.on('sendMessage', function(res) {
            var mine = res.mine; //包含我發送的消息及我的信息
            var to = res.to; //對方的信息
            var msg = {
                    'collectUserId': to.id,
                    'content': mine.content
            }
            send(JSON.stringify(msg));
        });
        
        //監聽修改簽名
        layim.on('sign', function(value){
            此處可以ajax修改簽名
        });     
    });
</script>