基於layim+easemob（環信webim）的網頁即時聊天

時間 2019-11-09

標籤基於 layim+easemob layim easemob webim 網頁即時聊天欄目快樂工作简体版

原文原文鏈接

WebIM

簡述

本webim是基於 layim 和環信webim3.X開發而成的，本項目僅供學習使用，使用前請先到layim 官網獲取layim的受權許可。目前已完成的功能有：

1.好友/羣內的文字、表情、圖片、文件 在線/離線消息發送和接收。 
2.查看羣員列表。 
3.面板內快速查找。 
4.面板右鍵自定義事件 
5.修改簽名
6.自定義上傳背景皮膚
7.搜索好友/羣
8.添加好友/羣
9.新建羣
10.消息盒子展現
11.查看/修改我的信息
12.實時獲取好友在線狀態
13.擠下線提醒
14.文件儲存在七牛雲
15.增刪改 好友/好友分組
16.羣管理（增刪管理員/修改羣名片/單個羣員禁言解除禁言/踢人）

說明

1）由於考慮到須要和app之間進行通訊（表情，圖片等），環信的表情定義爲[/:u]相似的字符而layim則爲face[/:u]的字符，爲了同時知足兩種狀況，修改了layim.js的表情相關代碼，請知曉
2）自定義右鍵的刪除功能借鑑的是layim的刪除歷史會話
3）自定義上傳皮膚功能，在layim.js添加了一個setSkinByUser的方法，並修改了皮膚尋則模版，對應的上傳路徑是class/doAction.php?action=uploadSkin
4）面板內的搜索好友功能，修改了layim.js的search方法

原則上是不建議自行修改layim.js文件的，由於這樣不利於後期的維護升級。php

部分截圖以下

體驗地址：test.guoshanchina.comcss

體驗賬號：html

用戶名：911088 密碼：123456jquery

用戶名：1570855 密碼：123456git

用戶名：1570845 密碼：123456github

用戶名：911058 密碼：123456web

用戶名：910992 密碼：123456app

用戶名：911067 密碼：123456socket

用戶名：911100 密碼：123456ide

用戶名：911085 密碼：123456

開始以前，你要了解layui擴展第三方插件的方法，而後在環信註冊賬號並建立應用。

layui綁定擴展

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

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' //（返回的數據格式見下文）
        , type: '' //默認post
    }
    //上傳文件接口
    , uploadFile: {
        url: 'class/doAction.php?action=uploadFile' //
        , type: '' //默認post
    }
    //自定義皮膚
    ,uploadSkin: {
        url: 'class/doAction.php?action=uploadSkin'
        , type: 'post' //默認post
    }                    
    ,systemSkin: {//選擇系統皮膚
        url: 'class/doAction.php?action=systemSkin'
        , type: 'post' //默認post
    }
    , isAudio: false //開啓聊天工具欄音頻
    , isVideo: false //開啓聊天工具欄視頻

    //擴展工具欄
    // , tool: [{
    //         alias: 'code'
    //         , title: '代碼'
    //         , icon: '&#xe64e;'
    //     }]
    ,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' //發現頁面地址，若不開啓，剔除該項便可
    , chatLog: layui.cache.dir + 'css/modules/layim/html/chatLog.html' //聊天記錄頁面地址，若不開啓，剔除該項便可
});

});