效果图
引用
<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 com.sun.org.apache.bcel.internal.generic.NEW; import net.sf.json.JSONObject; /** } |
