登录
首页 >  数据库 >  MySQL

基于layim+easemob(环信webim)的网页即时聊天

来源:SegmentFault

时间:2023-02-16 20:11:04 219浏览 收藏

有志者,事竟成!如果你在学习数据库,那么本文《基于layim+easemob(环信webim)的网页即时聊天》,就很适合你!文章讲解的知识点主要包括MySQL、html、PHP、javascript、css,若是你对本文感兴趣,或者是想搞懂其中某个知识点,就请你继续往下看吧~

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文件的,因为这样不利于后期的维护升级。


部分截图如下
好友间聊天

我的资料

自定义上传皮肤

自定义右键好友

自定义右键分组

已经是好友不能添加

消息盒子

群管理

添加好友

删除好友

体验地址:test.guoshanchina.com

体验帐号:

用户名:911088 密码:123456

用户名:1570855 密码:123456

用户名:1570845 密码:123456

用户名:911058 密码:123456

用户名:910992 密码:123456

用户名:911067 密码:123456

用户名:911100 密码:123456

用户名:911085 密码:123456

开始之前,你要了解layui扩展第三方插件的方法,然后在环信注册帐号并创建应用。

  1. layui绑定扩展

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

  1. 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: ''
        //     }]
        ,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' //聊天记录页面地址,若不开启,剔除该项即可
    });  

    });

  2. socket.js

内容比较长就不贴出来了,需要源码的朋友可以在这里下载https://github.com/shmilylbel...
,当然最好是star一下,因为我会继续完善该项目的。

【注意】github 上传的代码已去除layim.js,所以下载代码后请在你获取到 layim.js授权后将 layim.js 拖进 static / layui / lay / modules / 文件夹内方可运行。

文中关于mysql的知识介绍,希望对你的学习有所帮助!若是受益匪浅,那就动动鼠标收藏这篇《基于layim+easemob(环信webim)的网页即时聊天》文章吧,也可关注golang学习网公众号了解相关技术文章。

声明:本文转载于:SegmentFault 如有侵犯,请联系study_golang@163.com删除
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>
评论列表