Layim是一个基于Layui框架的即时通讯系统，提供了一套完整的即时通讯功能，包括用户登录、好友列表、聊天界面等

来源：恒创科技编辑：恒创科技编辑部

2024-02-06 13:47:15

Layim是一个基于Layui框架的即时通讯系统，提供了一套完整的即时通讯功能，包括用户登录、好友列表、聊天界面等。

以下是Layim的完整实例：

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>LayimInstantMessaging</title>
<linkrel="stylesheet"href="layui/css/layui.css">
<style>
body{
margin:20px;
}
</style>
</head>
<body>
<divclass="layui-layoutlayui-layout-admin">
<divclass="layui-header">
<divclass="layui-logo">LayimInstantMessaging</div>
<ulclass="layui-navlayui-layout-left">
<liclass="layui-nav-item"><ahref="">个人中心</a></li>
<liclass="layui-nav-item"><ahref="">消息<spanclass="layui-badge">9</span></a></li>
<liclass="layui-nav-item"><ahref="">更多</a></li>
</ul>
<ulclass="layui-navlayui-layout-right">
<liclass="layui-nav-item">
<ahref="javascript:;">admin</a>
<dlclass="layui-nav-child">
<dd><ahref="">基本设置</a></dd>
<dd><ahref="">安全设置</a></dd>
<dd><ahref="">退出</a></dd>
</dl>
</li>
</ul>
</div>
<divclass="layui-body">
<divclass="layui-tablayui-tab-brief">
<ulclass="layui-tab-title">
<liclass="layui-this">好友列表</li>
<li>聊天界面</li>
</ul>
<divclass="layui-tab-content">
<divclass="layui-tab-itemlayui-show">
<ulclass="layui-timeline">
<liclass="layui-timeline-item">
<iclass="layui-iconlayui-timeline-axis">&#xe63f;</i>
<divclass="layui-timeline-contentlayui-text">
<h3class="layui-timeline-title">2018年12月</h3>
</div>
</li>
<liclass="layui-timeline-item">
<iclass="layui-iconlayui-timeline-axis">&#xe63f;</i>
<divclass="layui-timeline-contentlayui-text">
<h3class="layui-timeline-title">2018年11月</h3>
</div>
</li>
<liclass="layui-timeline-item">
<iclass="layui-iconlayui-timeline-axis">&#xe63f;</i>
<divclass="layui-timeline-contentlayui-text">
<h3class="layui-timeline-title">2018年10月</h3>
</div>
</li>
</ul>
</div>
<divclass="layui-tab-item">
<ulclass="layim-chat-main"></ul>
<divclass="layim-chat-footer">
<divclass="layui-unselectlayim-chat-tool">
<spanclass="layui-iconlayim-tool-face"title="选择表情">&#xe60c;</span>
<spanclass="layui-iconlayim-tool-image"title="上传图片">&#xe60a;</span>
<spanclass="layui-iconlayim-tool-file"title="上传附件">&#xe609;</span>
</div>
<textareaclass="layui-unselectlayim-chat-textarea"placeholder="请输入内容"></textarea>
<divclass="layui-unselectlayim-chat-bottom">
<divclass="layui-unselectlayim-chat-send">
<spanclass="layui-btnlayui-btn-primary">发送</span>
<spanclass="layui-btn">Ctrl+Enter</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<divclass="layui-footer">
©2022LayimInstantMessaging
</div>
</div>
<scriptsrc="layui/layui.js"></script>
<script>
layui.use(['element','layim'],function(){
varelement=layui.element;
varlayim=layui.layim;

//初始化Layim
layim.init({
init:{
mine:{
username:'admin',
id:'1',
status:'online',
avatar:'http://www.layui.com/images/avatar.png'
}
},
brief:false
});
});
</script>
</body>
</html>