标签：arraylist ajax on() 在线 object 流程 判断 element rem
实现流程：
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>
标签：arraylist ajax on() 在线 object 流程 判断 element rem
原文地址：https://www.cnblogs.com/YeShaoFa/p/10838322.html
