实际效果:
在这里插入图片描述

window下必须打开dos挂起服务层。
linux可以直接 start -d 直接启动进程。

window下必须挂起
--------------------------------------------分割线------------------------------------------
直接用这个源码就能启动进程。【加qq可以指导:912413519】
定义一个服务层用来启动websocket
--------------------------------------------分割线------------------------------------------
执行成功后配合layIm的效果:
websocket发送图片、表情文件
右击事件

--------------------------------------------分割线------------------------------------------

添加群成员等群聊操作
/* 绑定群聊右击事件 */

    $('body').on('mousedown', '.layim-list-group li', function(e) {
        // 清空所有右击弹框
        emptyTips();
        if (3 != e.which) {
            return;
        }
        // 不再派发事件
        e.stopPropagation();
        var othis = $(this);
        if (othis.hasClass('layim-null')) return;

        // 移除所有选中的样式
        $('.layim-list-group li').removeAttr("style", "");
        // 标注为选中
        othis.css({'background-color': 'rgba(0,0,0,.05)'});

        var mineId = $(this).attr('class');
        var uid = Date.now().toString(36);
        var space_icon = '  ';
        var space_text = '      ';
        var img = $(this).find('img').attr('src');
        var name = $(this).children('span').html();
        var html = [
            '<ul id="contextmenu_' + uid + '" data-id="' + mineId + '" data-index="' + mineId + '" data-mold="2" data-name="'+name+'" data-img="'+img+'">',
            '<li data-type="menuChat"><i class="layui-icon" >&#xe611;</i>' + space_icon + '发送群消息</li>',
            '<li data-type="menuProfile"><i class="layui-icon">&#xe60a;</i>' + space_icon + '查看群资料</li>',
            '<li data-type="menuHistory"><i class="layui-icon" >&#xe60e;</i>' + space_icon + '消息记录</li>',
            '<li data-type="menuUpdate">' + space_text + '修改群图标</li>',
            '<li data-type="menuRemove" data-mold="2">' + space_text + '解散该群</li>',
            '<li data-type="menuSecede">' + space_text + '退出该群</li></ul>',
            '<li data-type="menuResetGroup"><i class="layui-icon" >&#xe669;</i>'+space_icon+'刷新群聊列表</li>',
            '<li data-type="menuInsertGroup">'+space_text+'创建群聊</li></ul>',
        ].join('');
        layer.tips(html, othis, {
            tips: 1
            , time: 0
            , shift: 5
            , fix: true
            , skin: 'ayui-box layui-layim-contextmenu'
            , success: function (layero) {
                var liCount = (html.split('</li>')).length;
                var stopmp = function (e) {
                    stope(e);
                };
                layero.off('mousedowm', stopmp).on('mousedowm', stopmp);
                var layerobj = $('#contextmenu_' + uid).parents('.layui-layim-contextmenu');
                // 移动弹框位置
                var top = layerobj.css('top').toLowerCase().replace('px', '');
                var left = layerobj.css('left').toLowerCase().replace('px', '');
                top = getTipTop(1, top, liCount);
                left = 30 + parseInt(left);
                layerobj.css({'width': '150px', 'left': left + 'px', 'top': top + 'px'});
                $('.layui-layim-contextmenu li').css({'padding-left': '18px'});
            }
        });
    })
Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐