html5聊天室系统实战开发|私聊|群聊


基于html5+css3+jQuery+wcPop+swiper等技术开发的仿微信聊天室实战项目,有单聊、多聊模式,实现了消息、表情的发送,图片、视频预览,红包、打赏等微交互功能。

010360截图20180703095355515.jpg

// 格式化编辑器包含标签
_editor.addEventListener("click", function () {
    //$(".wc__choose-panel").hide();
}, true);
_editor.addEventListener("focus", function(){
    surrounds();
}, true);
_editor.addEventListener("input", function(){
    surrounds();
}, false);

// 发送信息
var $chatMsgList = $("#J__chatMsgList");
function isEmpty(){
    var html = $editor.html();
    html = html.replace(/<br[\s\/]{0,2}>/ig, "\r\n");
    html = html.replace(/<[^img].*?>/ig, "");
    html = html.replace(/&nbsp;/ig, "");
    return html.replace(/\r\n|\n|\r/, "").replace(/(?:^[ \t\n\r]+)|(?:[ \t\n\r]+$)/g, "") == "";
}
$(".J__wchatSubmit").on("click", function(){
    // 判断内容是否为空
    if(isEmpty()) return;

    var html = $editor.html();
    var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
    html = html.replace(reg, "<a href='https://ask.julyedu.com/$1$2'>$1$2</a>");
    var msgTpl = [
        '<li class="me">\
            <div class="content">\
                <p class="author">Nice奶思</p>\
                <div class="msg">'+ html +'</div>\
            </div>\
            <a class="avatar" href="微聊(好友主页).html"><img src="img/uimg/u__chat-img14.jpg" /></a>\
        </li>'
    ].join("");
    $chatMsgList.append(msgTpl);

    // 清空聊天框并获取焦点(处理输入法和表情 - 聚焦)
    if(!$(".wc__choose-panel").is(":hidden")){
        $editor.html("");
    }else{
        $editor.html("").focus().trigger("click");
    }
    wchat_ToBottom();
});


001360截图20180703094314632.jpg


002360截图20180703094436583.jpg


003360截图20180703094529953.jpg


004360截图20180703094558646.jpg


005360截图20180703094648536.jpg


006360截图20180703094742961.jpg


007360截图20180703094909872.jpg


008360截图20180703095118526.jpg


009360截图20180703095159433.jpg


010360截图20180703095355515.jpg


011360截图20180703095500179.jpg


012360截图20180703095616681.jpg


013360截图20180703095702680.jpg

欢迎大家一起交流学习 Q:282310962 wx:xy190310
已邀请:

要回复问题请先登录注册