WebIM

簡述

本webim是基于 layim 和環(huán)信webim3.X開發(fā)而成的议泵，本項目僅供學習使用，使用前請先到layim官網(wǎng)獲取layim的授權許可 。目前已完成的功能有：
1.好友/群內(nèi)的文字袒哥、表情榔昔、圖片分衫、文件 在線/離線消息發(fā)送和接收爷辱。
2.查看群員列表证芭。
3.面板內(nèi)快速查找晕翠。
4.面板右鍵自定義事件
5.修改簽名
6.自定義上傳背景皮膚
7.搜索好友/群
8.添加好友/群
9.新建群
10.消息盒子展示
11.查看/修改個人信息
12.實時獲取好友在線狀態(tài)
13.擠下線提醒
14.文件儲存在七牛云
15.增刪改 好友/好友分組
16.群管理（增刪管理員/修改群名片/單個群員禁言解除禁言/踢人）

需要手動修改的地方包括

1 static/js/webim.config.js 環(huán)信配置文件appkey喷舀，需要先到環(huán)信注冊添加應用獲取。
2 class/config.php 配置文件
3 如果想在本地運行demo淋肾，但是又沒有l(wèi)ayim.js文件硫麻，想試用后再去購買授權，那么請到test.guoshanchina.com登錄后通過查看頁面源碼找到layim.js文件下載并保存到對應文件位置即可樊卓。

說明

1）因為考慮到需要和app之間進行通信（表情拿愧，圖片等），環(huán)信的表情定義為[/:u]類似的字符而layim則為face[/:u]的字符碌尔，為了同時滿足兩種情況浇辜，修改了layim.js的表情相關代碼，請知曉
2） 自定義右鍵的刪除功能借鑒的是layim的刪除歷史會話
3） 自定義上傳皮膚功能唾戚，在layim.js添加了一個setSkinByUser的方法柳洋，并修改了皮膚尋則模版，對應的上傳路徑是class/doAction.php?action=uploadSkin
4） 面板內(nèi)的搜索好友功能叹坦，修改了layim.js的search方法

原則上是不建議自行修改layim.js文件的熊镣，因為這樣不利于后期的維護升級。

部分截圖如下

好友間聊天

我的資料

自定義上傳皮膚

自定義右鍵好友

自定義右鍵分組

已經(jīng)是好友不能添加

消息盒子

群管理

添加好友

刪除好友

體驗地址：test.guoshanchina.com

體驗帳號：

用戶名：911088 密碼：123456

用戶名：1570855 密碼：123456

用戶名：1570845 密碼：123456

用戶名：911058 密碼：123456

用戶名：910992 密碼：123456

用戶名：911067 密碼：123456

用戶名：911100 密碼：123456

用戶名：911085 密碼：123456

開始之前，你要了解layui擴展第三方插件的方法绪囱，然后在環(huán)信注冊帳號并創(chuàng)建應用测蹲。

1. layui綁定擴展

        layui.config({
            base: 'static/js/'
        }).extend({
            socket: 'socket',
        });

2. layim,socket初始化

        layui.use(['layim', 'jquery', 'socket'], function (layim, socket) {
            var $ = layui.jquery;
            var socket = layui.socket;
            var token = $('body').data('token');
            var rykey = $('body').data('rykey');           
            socket.config({
                user: token,
                pwd: rykey ,
                layim: layim,
            });
   
            layim.config({
                init: {
                    url: 'class/doAction.php?action=get_user_data', data: {}
                },
                //獲取群成員
                members: {
                    url: 'class/doAction.php?action=groupMembers', data: {}
                }
                //上傳圖片接口
                , uploadImage: {
                    url: 'class/doAction.php?action=uploadImage' //（返回的數(shù)據(jù)格式見下文）
                    , type: '' //默認post
                }
                //上傳文件接口
                , uploadFile: {
                    url: 'class/doAction.php?action=uploadFile' //
                    , type: '' //默認post
                }
                //自定義皮膚
                ,uploadSkin: {
                    url: 'class/doAction.php?action=uploadSkin'
                    , type: 'post' //默認post
                }                    
                ,systemSkin: {//選擇系統(tǒng)皮膚
                    url: 'class/doAction.php?action=systemSkin'
                    , type: 'post' //默認post
                }
                , isAudio: false //開啟聊天工具欄音頻
                , isVideo: false //開啟聊天工具欄視頻
   
                //擴展工具欄
                // , tool: [{
                //         alias: 'code'
                //         , title: '代碼'
                //         , icon: ''
                //     }]
                ,title: '我的webim' 
                ,copyright:true
                , initSkin: '1.jpg' //1-5 設置初始背景
                , notice: true //是否開啟桌面消息提醒，默認false
                , msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html' //消息盒子頁面地址毕箍，若不開啟弛房，剔除該項即可
                , find: layui.cache.dir + 'css/modules/layim/html/find.html' //發(fā)現(xiàn)頁面地址，若不開啟而柑，剔除該項即可
                , chatLog: layui.cache.dir + 'css/modules/layim/html/chatLog.html' //聊天記錄頁面地址文捶，若不開啟，剔除該項即可
            });  
        });
   

3. socket.js
   內(nèi)容比較長就不貼出來了媒咳，需要源碼的朋友可以在這里下載https://github.com/shmilylbelva/webim,當然最好是star一下粹排，因為我會繼續(xù)完善該項目的。

【注意】github 上傳的代碼已去除layim.js涩澡，所以下載代碼后請在你獲取到 layim.js授權后將 layim.js 拖進 static / layui / lay / modules / 文件夾內(nèi)方可運行顽耳。