Layim 聊天功能
效果图
引用
<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; /** } |
Layim 聊天功能相关推荐
- php聊天功能_php实现简单聊天功能
搜索热词 1.创建聊天消息表,其表的字段有消息内容,发送时间和发送者的名称: CREATE TABLE `guanhui`.`message` ( `id` INT(10) NOT NULL AUTO ...
- Netty 4.x Netty 实现聊天功能
Netty 实现聊天功能 Netty 是一个 Java NIO 客户端服务器框架,使用它可以快速简单地开发网络应用程序,比如服务器和客户端的协议.Netty 大大简化了网络程序的开发过程比如 TCP ...
- 简单java socket_基于Java Socket实现一个简易在线聊天功能(一)
最近做了一个项目,其中有一个在线网页交流的需求,好久没写代码了,手都生疏了,于是先写demo练练手,分享到脚本之家平台,以此做个记录,方便自己和大家使用. 先给大家说下实现步骤分这样几大步: 1.使用 ...
- 基于PHP实现一个简单的在线聊天功能(轮询ajax )
基于PHP实现一个简单的在线聊天功能(轮询ajax ) 一.总结 1.用的轮询ajax 二.基于PHP实现一个简单的在线聊天功能 一直很想试着做一做这个有意思的功能,感觉复杂的不是数据交互和表结构,麻 ...
- python实现简易聊天需要登录_python编写简易聊天室实现局域网内聊天功能
本文实例为大家分享了python实现局域网内聊天功能的具体代码,供大家参考,具体内容如下 功能: 可以向局域网内开启接收信息功能的ip进行发送信息,我们可以写两段端口不同的代码来实现在一台电脑上与自己 ...
- 网络编程C/S模型怎样才能实现真正的聊天功能
学完socket编成后,就迫不及待地写一个简单的聊天程序,好在同学面前装装逼,毕竟外行看热闹.然而在自己的电脑上运行是毫无差错,发送接收都没有问题,然而将客户端的exe文件打包后发送给其他电脑上运行时 ...
- 在线服务器和客户端聊天,实验三、客户端和服务器能实现简单的聊天功能
<实验三.客户端和服务器能实现简单的聊天功能>由会员分享,可在线阅读,更多相关<实验三.客户端和服务器能实现简单的聊天功能(6页珍藏版)>请在人人文库网上搜索. 1.实验三.客 ...
- tornado实现基于websocket的好友一对一聊天功能
做项目的时候涉及到即时通信了,所以在 gladuo 的建议下看了一篇教程,[转]Tornado 搭建基于 WebSocket 的聊天服务,经过一番修改调试实现了功能,在此总结分享一下. 按思路来聊: ...
- 安卓平台基于SIP协议实现注册,聊天功能
============问题描述============ 不涉及音频,视频发送,只要实现注册,和聊天功能就行, 网上下了sipdroid的源码,但是XML中配置的<uses-sdk androi ...
- 苹果禁用FaceTime多人聊天功能:漏洞将很快修复
[TechWeb]1月30日消息,据国外媒体报道,苹果在FaceTime上禁用了一项多人聊天功能,此前有用户表示,FaceTime存在一个漏洞可能会让通话者远程激活另一个人的麦克风. 这个漏洞使得Fa ...
最新文章
- javascript取得鼠标的位置
- 字段变成小写 序列化_序列化/反序列化
- 数据库系统概论:第五章 数据库完整性
- 使用CEfSharp 下载文件 弹出保存框 IDownloadHandler
- 进程资源限制(rlimit)
- 人工神经网络之BP神经网络模型
- 基于Java+SpringMvc+vue+element实现高效学生社团平台管理
- STM32之RCC配置
- SEO(search engine optimization)搜索引擎优化
- Ananagrams (多种stl)
- react native 第三方组件react-native-swiper 轮播组件
- oracle 12c sp2 0667,关于数据库安装的问题SP2-0667: Message file sp1.msb not found
- 对极几何基本概念与极线约束
- 8box这件事欠考虑
- 2dlda人脸识别 matlab,利用2DPCA和2DLDA在ORL人脸数据库上做的人脸识别实验
- 微型计算机芯片上的位数,微处理器芯片的位数指的是什么
- matlab多重心法,多重心法例.ppt
- vue 动态绑定 class
- 如何快速打造一个高权重的短视频账号?短视频运营推广日记(2)
- 胡喜:从 BASIC 到 basic ,蚂蚁金服技术要解决两个基本的计算问题
热门文章
- C/C++ 混合编译 C++中的extern “C“
- fwr310刷openwrt_迅捷FWR310无线路由器的刷机
- SCRATCH编程与科学——简单电路
- 计算机word修改文章,Word写报告:查看和修改文章的层次结构-word技巧-电脑技巧收藏家...
- Coding life_云栖社区的个性化首页上线
- 关于使用实验室服务器的GPU以及跑上TensorFlow代码
- Matlab识别拨号音,电话拨号音识别全解.ppt
- PS网页设计教程XXII——在PS中创建单页复古网页布局
- java修改mariadb数据_MariaDB更新数据
- Kafka——Kafka的日志存储(5)