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 //服务端动态时间戳 });};
通过这种方式可以将接收到的信息显示到对话框上。
