效果图

引用

<link rel="stylesheet" href="static/layim/dist/css/layui.css">
    <script type="text/javascript src="static/layim/dist/layui.all.js"></script>
    <script type="text/javascript src="static/layim/dist/layimindex.js"></script>
    <script src="static/layim/dist/layui.js"></script>
    <script src="static/layim/webchat.js"></script>

前台代码

var $;

if(!/^http(s*):\/\//.test(location.href)){
  alert('请部署到localhost上查看该演示');
}
var layimGb=null;
var uname="";
var sid="";

var host="ws://localhost:8080/xtgsnew/LL_ws/";

var ws;

layui.use('layim', function(layim){
    $ =layui.$;
  layimGb=layim;
  //基础配置
  layim.config({

//初始化接口
    init: {
      url: 'http://localhost:8080/xtgsnew/CommonUtil/getUserMsg'
      //url: 'json/getList.json'
      ,data: {}
    }

//查看群员接口
    ,members: {
      url: 'json/getMembers.json'
      ,data: {}
    }
    
    //上传图片接口
    ,uploadImage: {
      url: '/upload/image' //(返回的数据格式见下文)
      ,type: '' //默认post
    }
    
    //上传文件接口
    ,uploadFile: {
      url: '/upload/file' //(返回的数据格式见下文)
      ,type: '' //默认post
    }
    
    ,isAudio: true //开启聊天工具栏音频
    ,isVideo: true //开启聊天工具栏视频
    
    //扩展工具栏
    ,tool: [{
      alias: 'code'
      ,title: '代码'
      ,icon: ''
    }]
    
    //,brief: true //是否简约模式(若开启则不显示主面板)
    
    //,title: 'WebIM' //自定义主面板最小化时的标题
    //,right: '100px' //主面板相对浏览器右侧距离
    //,minRight: '90px' //聊天面板最小化时相对浏览器右侧距离
    ,initSkin: '5.jpg' //1-5 设置初始背景
    //,skin: ['aaa.jpg'] //新增皮肤
    //,isfriend: false //是否开启好友
    //,isgroup: false //是否开启群组
    //,min: true //是否始终最小化主面板,默认false
    ,notice: true //是否开启桌面消息提醒,默认false
    //,voice: false //声音提醒,默认开启,声音文件为:default.mp3
    
    ,msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html' //消息盒子页面地址,若不开启,剔除该项即可
    ,find: layui.cache.dir + 'css/modules/layim/html/find.html' //发现页面地址,若不开启,剔除该项即可
    ,chatLog: layui.cache.dir + 'css/modules/layim/html/chatlog.html' //聊天记录页面地址,若不开启,剔除该项即可
    
  });

//监听自定义工具栏点击,以添加代码为例
  layim.on('tool(code)', function(insert){
    layer.prompt({
      title: '插入代码'
      ,formType: 2
      ,shade: 0
    }, function(text, index){
      layer.close(index);
      insert('[pre class=layui-code]' + text + '[/pre]'); //将内容插入到编辑器
    });
  });

layim.on('ready', function(options){
              console.log(options);
              debugger;
              uname=options.mine.username;
              sid=options.mine.id;
              getHistMsg(layui,uname+"_"+sid);
              //链接聊天
              conWebSocket();
              
            });

//监听发送消息
  layim.on('sendMessage', function(data){
    debugger;
    var To = data.to;
   
      var obj={
              type:1,
        userName:uname+"_"+sid,
        contentType:"online",
        to:data.to.name+"_"+data.to.id,
        from:data.mine
              }
      var message =JSON.stringify(obj);
      ws.send(message);
 
    
  });

//监听查看群员
  layim.on('members', function(data){
    //console.log(data);
  });
 
  //监听聊天窗口的切换
  layim.on('chatChange', function(res){
    
  });
});

function getHistMsg(layui,userID){
//获取离线消息
              layui.$.get("http://localhost:8080/xtgsnew/FriendWS/getUnreadMessage?userId="+userID,function(data){
              debugger;
                  for(var i=0;i<data.length;i++)
                  {
                  var from=data[i].friend_message.from;
                       layimGb.getMessage({
                    username: from.username
                    ,type:  "friend"
                ,avatar:from.avatar
                ,id: from.id
                    ,content:from.content
                    ,time:data[i].friend_message.time
                });
                  }
              });
}

function conWebSocket(){
host=host+uname+"_"+sid;
if ('WebSocket' in window) {  
    ws=new WebSocket(host);  
} else if ('MozWebSocket' in window) {  
    ws= new MozWebSocket(host);
} else {
    layui.use(['layer'], function(){
          var layer = layui.layer;
          layer.alert("您的浏览器不支持webscoket协议,建议使用新版谷歌、火狐等浏览器,请勿使用IE10以下浏览器,360浏览器请使用极速模式,不要使用兼容模式!");
    });
}

ws.onopen = function(e) {
    
}
    
ws.onclose = function(e) {
    console.log("ws断开连接!");
}
//监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。  
window.onbeforeunload = function () {  
      ws.close();  
}  
ws.onmessage = function(e) {

var v=eval("("+e.data+")");

var from= v.from;
 //chat
  layimGb.getMessage({
    username: from.username
    ,type:  "friend"
    ,avatar: from.avatar
    ,id: from.id
    ,content:from.content
    ,time:v.time
  });
}
    
ws.onerror = function(e) {
    layui.use(['layer'], function(){
          var layer = layui.layer;
          layer.alert("ws发生错误,请勿使用IE9以下浏览器,360浏览器请使用极速模式,不要使用兼容模式!");
    });
}

}

后台代码

package com.nome.plugin.layim;

import static org.hamcrest.CoreMatchers.nullValue;

import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;

import com.sun.org.apache.bcel.internal.generic.NEW;

import net.sf.json.JSONObject;
//userName猜测是个任意字符串
import oracle.net.aso.a;
@ServerEndpoint("/LL_ws/{userName}")
public class LLWebSocket {
    private static int onlineCount = 0;
   // public static Map<String,Session> mapUS=new HashMap<String,Session>();//根据用户找session
   // public static Map<Session,String> mapSU=new HashMap<Session,String>();//根据session找用户
    //ConcurrentHashMap是线程安全的,而HashMap是线程不安全的。
    public static ConcurrentHashMap<String,Session> mapUS = new ConcurrentHashMap<String,Session>(); 
    private static ConcurrentHashMap<Session,String> mapSU = new ConcurrentHashMap<Session,String>();

/**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session,@PathParam("userName") String userName){
     //this.session=session;
     mapUS.put(userName,session);
     mapSU.put(session,userName);
     //上线通知由客户端自主发起
     onlineCount++;           //在线数加1
        System.out.println("用户"+userName+"进入wsll!当前在线人数为" + onlineCount);
       
       
    }
    
    /**
     * 连接关闭调用的方法
     */
 @OnClose
    public void onClose(Session session){
     String userName=mapSU.get(session);
     if(userName!=null&&userName!=""){
         //下线通知
         JSONObject jsonObject=new JSONObject();
         jsonObject.put("type", 3);
         jsonObject.put("userName", userName);
         jsonObject.put("contentType", "offline");
         jsonObject.put("to", "all");
         String jsonString=jsonObject.toString();
         for(Session s:session.getOpenSessions()){//循环发给所有在线的人
       s.getAsyncRemote().sendText(jsonString);
      }
         onlineCount--;           //在线数减1   
            System.out.println("用户"+userName+"退出wsll!当前在线人数为" + onlineCount);
         mapUS.remove(userName);
         mapSU.remove(session);
     }
    }
    /**
     * 收到客户端消息后调用的方法
     */
 static Map offLineDB = new HashMap();
 
 @OnMessage
    public void onMessage(String message,Session session) {
        //System.out.println("来自客户端的消息:" + message);
        JSONObject jsonObject=JSONObject.fromObject(message);
        int type = jsonObject.getInt("type");
        String to=jsonObject.getString("to");
        jsonObject.remove("to");
        //if(type==0||to==null||to==""){return ;}
       
        SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//设置日期格式
        String time=df.format(new Date());// new Date()为获取当前系统时间
        jsonObject.put("time", time);
       
        Session socketoffline_to=mapUS.get(to);
        if(socketoffline_to==null||"".equals(socketoffline_to))
        {
         //离线消息,A给B发的消息格式
         //以下内容来自message这个代码
         //{"type":1,"userName":"贤心_100001","contentType":"online","to":"纸飞机_100000","from":{"username":"贤心","avatar":"http://cdn.firstlinkapp.com/upload/2016_6/1465575923433_33812.jpg","id":"100001","mine":true,"content":"4444444444444444"}}
            //离线表:ID 内容 就是上面那个message   接收人就是 to   状态未读
         //当B进入页面在线的时候,通过ajax获取自己的维度消息表,这时候吧状态改成已读
         //ajax未读消息返回 格式如上寸的那个{"type":1,"userName":"....
         
/*         ("username":鲁涛,内容:123,to:小黄,state:1)
         ("username":鲁涛,内容:456,to:小黄)
         ("username":鲁涛,内容:444,to:小黄)
         
         
         ("username":123,内容:456,to:ZZ黄)
         */
         List offcontentList =null;
         String userName = jsonObject.getString("userName");
         String from = jsonObject.getString("from");
           JSONObject fromObject=JSONObject.fromObject(from);
           String content=fromObject.getString("content");
         offcontentList=(List) offLineDB.get(userName);
         if(offcontentList==null)
         {
          offcontentList=new ArrayList<String>();
          
         }
          offcontentList.add(content);
          
   
         offLineDB.put(userName, offcontentList);
         
         
         return;
        }
       
 
      switch (type) {
  case 1://单聊
   Session session_to=mapUS.get(to);
         if(session_to!=null){
          session_to.getAsyncRemote().sendText(jsonObject.toString());
          //System.out.println("发给"+to+":"+jsonObject.toString());
         }
   break;
  case 2://群聊
   String[] members=to.split(",");
   //发送到在线用户
   for(String member:members){
    session=mapUS.get(member);
    if(session!=null){
     session.getAsyncRemote().sendText(jsonObject.toString());
     //System.out.println("发给群里所有在线的人"+member+":"+jsonObject.toString());
    }
   }
   break;
  case 3:
    //所有人
   for(Session s:session.getOpenSessions()){//循环发给所有在线的人
    s.getAsyncRemote().sendText(jsonObject.toString());
    //System.out.println("发给系统所有在线的人"+session.getOpenSessions()+":"+jsonObject.toString());
   }
   break;
  default:
   break;
  }
    }
    /**
     * 发生错误时调用
     * @param session
     * @param error
     */
    @OnError
    public void onError(Throwable error){
        System.out.println("llws发生错误");
        error.printStackTrace();
    }

}

Layim 聊天功能相关推荐

  1. php聊天功能_php实现简单聊天功能

    搜索热词 1.创建聊天消息表,其表的字段有消息内容,发送时间和发送者的名称: CREATE TABLE `guanhui`.`message` ( `id` INT(10) NOT NULL AUTO ...

  2. Netty 4.x Netty 实现聊天功能

    Netty 实现聊天功能 Netty 是一个 Java NIO 客户端服务器框架,使用它可以快速简单地开发网络应用程序,比如服务器和客户端的协议.Netty 大大简化了网络程序的开发过程比如 TCP ...

  3. 简单java socket_基于Java Socket实现一个简易在线聊天功能(一)

    最近做了一个项目,其中有一个在线网页交流的需求,好久没写代码了,手都生疏了,于是先写demo练练手,分享到脚本之家平台,以此做个记录,方便自己和大家使用. 先给大家说下实现步骤分这样几大步: 1.使用 ...

  4. 基于PHP实现一个简单的在线聊天功能(轮询ajax )

    基于PHP实现一个简单的在线聊天功能(轮询ajax ) 一.总结 1.用的轮询ajax 二.基于PHP实现一个简单的在线聊天功能 一直很想试着做一做这个有意思的功能,感觉复杂的不是数据交互和表结构,麻 ...

  5. python实现简易聊天需要登录_python编写简易聊天室实现局域网内聊天功能

    本文实例为大家分享了python实现局域网内聊天功能的具体代码,供大家参考,具体内容如下 功能: 可以向局域网内开启接收信息功能的ip进行发送信息,我们可以写两段端口不同的代码来实现在一台电脑上与自己 ...

  6. 网络编程C/S模型怎样才能实现真正的聊天功能

    学完socket编成后,就迫不及待地写一个简单的聊天程序,好在同学面前装装逼,毕竟外行看热闹.然而在自己的电脑上运行是毫无差错,发送接收都没有问题,然而将客户端的exe文件打包后发送给其他电脑上运行时 ...

  7. 在线服务器和客户端聊天,实验三、客户端和服务器能实现简单的聊天功能

    <实验三.客户端和服务器能实现简单的聊天功能>由会员分享,可在线阅读,更多相关<实验三.客户端和服务器能实现简单的聊天功能(6页珍藏版)>请在人人文库网上搜索. 1.实验三.客 ...

  8. tornado实现基于websocket的好友一对一聊天功能

    做项目的时候涉及到即时通信了,所以在 gladuo 的建议下看了一篇教程,[转]Tornado 搭建基于 WebSocket 的聊天服务,经过一番修改调试实现了功能,在此总结分享一下. 按思路来聊: ...

  9. 安卓平台基于SIP协议实现注册,聊天功能

    ============问题描述============ 不涉及音频,视频发送,只要实现注册,和聊天功能就行, 网上下了sipdroid的源码,但是XML中配置的<uses-sdk androi ...

  10. 苹果禁用FaceTime多人聊天功能:漏洞将很快修复

    [TechWeb]1月30日消息,据国外媒体报道,苹果在FaceTime上禁用了一项多人聊天功能,此前有用户表示,FaceTime存在一个漏洞可能会让通话者远程激活另一个人的麦克风. 这个漏洞使得Fa ...

最新文章

  1. javascript取得鼠标的位置
  2. 字段变成小写 序列化_序列化/反序列化
  3. 数据库系统概论:第五章 数据库完整性
  4. 使用CEfSharp 下载文件 弹出保存框 IDownloadHandler
  5. 进程资源限制(rlimit)
  6. 人工神经网络之BP神经网络模型
  7. 基于Java+SpringMvc+vue+element实现高效学生社团平台管理
  8. STM32之RCC配置
  9. SEO(search engine optimization)搜索引擎优化
  10. Ananagrams (多种stl)
  11. react native 第三方组件react-native-swiper 轮播组件
  12. oracle 12c sp2 0667,关于数据库安装的问题SP2-0667: Message file sp1.msb not found
  13. 对极几何基本概念与极线约束
  14. 8box这件事欠考虑
  15. 2dlda人脸识别 matlab,利用2DPCA和2DLDA在ORL人脸数据库上做的人脸识别实验
  16. 微型计算机芯片上的位数,微处理器芯片的位数指的是什么
  17. matlab多重心法,多重心法例.ppt
  18. vue 动态绑定 class
  19. 如何快速打造一个高权重的短视频账号?短视频运营推广日记(2)
  20. 胡喜:从 BASIC 到 basic ,蚂蚁金服技术要解决两个基本的计算问题

热门文章

  1. C/C++ 混合编译 C++中的extern “C“
  2. fwr310刷openwrt_迅捷FWR310无线路由器的刷机
  3. SCRATCH编程与科学——简单电路
  4. 计算机word修改文章,Word写报告:查看和修改文章的层次结构-word技巧-电脑技巧收藏家...
  5. Coding life_云栖社区的个性化首页上线
  6. 关于使用实验室服务器的GPU以及跑上TensorFlow代码
  7. Matlab识别拨号音,电话拨号音识别全解.ppt
  8. PS网页设计教程XXII——在PS中创建单页复古网页布局
  9. java修改mariadb数据_MariaDB更新数据
  10. Kafka——Kafka的日志存储(5)