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: {}
} http://img.blog.csdn.net/20160816103443919?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
admin想向test1发送信息，双击打开test1对话框。 http://img.blog.csdn.net/20160816103522768?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center http://img.blog.csdn.net/20160816103547519?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center 在test1的页面上会受到的信息提醒。 http://img.blog.csdn.net/20160816103621592?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center 点开后就可以看到对话信息，双方就可以进行交流了。
这样的一个过程中，内部实现的方式是这样的。 发送消息的时候，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 //服务端动态时间戳
});
}; 通过这种方式可以将接收到的信息显示到对话框上。
这个正需要，哈哈 我试试看能不能成功，之前按照他们说的不:lol成功 能把相关的文件发一下吗？我这边在项目里面没有找到
我试了一下发现，建立不上连接，用demo测试也是报错 reliableX 发表于 2017-7-21 11:18 static/image/common/back.gif
我试了一下发现，建立不上连接，用demo测试也是报错
升级一下tomcat版本。升级到7.0.8x就可以。7.0.4x不支持的 reliableX 发表于 2017-7-21 11:18 static/image/common/back.gif
我试了一下发现，建立不上连接，用demo测试也是报错
升级一下tomcat版本。升级到7.0.8x就可以。7.0.4x不支持的
页:
[1]