设为首页收藏本站

JEECG官方网站-企业级JAVA快速开发平台

 找回密码
 立即注册

关注JEECG发展历程 关注最新动态和版本, 记录JEECG成长点滴 最新动态 - 技术支持 - 师徒架构班

JEECG最新版本下载 JEECG智能开发平台 - 显著提高开发效率 常见问题 - 入门视频 - 参与开源团队

商务 QQ: 3102411850、418799587 商务热线: 18611788525 客服电话: 010-64808099 官方邮箱: jeecgos@163.com

查看: 4880|回复: 6

jeecg集成实现websocket在线聊天

[复制链接]

419

主题

31

好友

1万

积分

管理员

Rank: 12Rank: 12Rank: 12

最佳新人 活跃会员 热心会员 推广达人 宣传达人 灌水之王 突出贡献 优秀版主 荣誉管理 JEECG团队成员

发表于 2016-8-16 10:43:42 |显示全部楼层

     jeecg集成实现websocket在线聊天功能,使用layim作为在线聊天ui框架,Java的websocket作为后台服务。

    在jeecg各风格的首页引入layui.jsp这个文件为当前风格引入在线聊天功能,确保在jQuery后引入,layim框架依赖于jquery。

  1. <%@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

  1.   <dependency>
  2.        <groupId>org.p3framework</groupId>
  3.        <artifactId>jeecg-p3-biz-chat</artifactId>
  4.        <version>1.0.0</version>
  5.        <type>jar</type>
  6.        <scope>compile</scope>
  7.     </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 发生错误时调用


    聊天功能初始化时获得分组后的用户列表

  1.   init: {
  2.           //url: '$!{basePath}/content/chat/demo/json/getList.json'
  3.           url: 'chat/imController.do?getUsers'
  4.           ,data: {}
  5.       }
复制代码

      


    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疑难杂症,JEECG常见问题汇总在:http://t.cn/RvYsEF6

8

主题

1

好友

233

积分

中级会员

Rank: 5Rank: 5

发表于 2016-8-18 11:09:09 |显示全部楼层
这个正需要,哈哈
回复

使用道具 举报

0

主题

0

好友

23

积分

新手上路

Rank: 2

发表于 2017-7-3 15:09:12 |显示全部楼层
我试试看能不能成功,之前按照他们说的不成功
回复

使用道具 举报

0

主题

0

好友

23

积分

新手上路

Rank: 2

发表于 2017-7-3 17:55:32 |显示全部楼层
能把相关的文件发一下吗?我这边在项目里面没有找到
回复

使用道具 举报

0

主题

0

好友

27

积分

新手上路

Rank: 2

发表于 2017-7-21 11:18:40 |显示全部楼层
我试了一下发现,建立不上连接,用demo测试也是报错 图片1.png
回复

使用道具 举报

9

主题

1

好友

203

积分

中级会员

Rank: 5Rank: 5

发表于 2018-4-13 11:44:12 |显示全部楼层
reliableX 发表于 2017-7-21 11:18
我试了一下发现,建立不上连接,用demo测试也是报错

升级一下tomcat版本。升级到7.0.8x就可以。7.0.4x不支持的
回复

使用道具 举报

9

主题

1

好友

203

积分

中级会员

Rank: 5Rank: 5

发表于 2018-4-13 11:44:14 |显示全部楼层
reliableX 发表于 2017-7-21 11:18
我试了一下发现,建立不上连接,用demo测试也是报错

升级一下tomcat版本。升级到7.0.8x就可以。7.0.4x不支持的
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

Archiver|手机版|JEECG官方网站-企业级JAVA快速开发平台 ( 京ICP备12013567号-3 )  

GMT+8, 2019-3-24 11:04 , Processed in 1.263602 second(s), 26 queries , Gzip On.

JEECG Open Source

© 2001-2012 Comsenz Inc.

回顶部