JavaScript/jQuery WebIM 及时聊天通信工具 本地客户端

最新推荐文章于 2024-09-20 17:38:49 发布
最新推荐文章于 2024-09-20 17:38:49 发布
阅读量510 收藏
点赞数
分类专栏： 聊天通信 js

WebIM本地客户端，可以发送表情、调整字体、字体大小、字体颜色、加粗、下划线、斜体等；还支持收缩split条，详情等；

上UI界面，界面还不够专业，需要美工支持，下一期在做优化！

image

收缩详情

image

 

chat.html 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>IM Chat</title>
    
    <meta http-equiv="author" content="hoojo">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="css/chat-2.0.css" />
    <script type="text/javascript" src="jslib/jquery-1.7.1.min.js"></script>    
    <script type="text/javascript" src="jslib/send.message.editor-1.0.js"></script>    
    <script type="text/javascript" src="jslib/local.chat-2.0.js"></script>
    <script type="text/javascript">
        $(function () {
 
            $.WebIM({
                sender: "admin",
                receiver: "hoojo"
            });                    
            $(".chat-main").show(800);
                
        });
    </script>
  </head>
  
  <body>
  </body>
</html>

send.message.editor-1.0.js iframe editor编辑器js模块

/**
 * IM chat Send Message iframe editor
 * @author: hoojo
 * @email: hoojo_@126.com
 * @blog: http://blog.csdn.net/IBM_hoojo 
 * @createDate: 2012-5-24
 * @version 1.0
 **/
var agent = window.navigator.userAgent.toLowerCase();
var sendMessageEditor = {
 
     // 获取iframe的window对象
    getWin: function () {
        return /*!/firefox/.test(agent)*/false ? sendMessageEditor.iframe.contentWindow : window.frames[sendMessageEditor.iframe.name];
    },
 
    //获取iframe的document对象
    getDoc: function () {
        return !/firefox/.test(agent) ? sendMessageEditor.getWin().document : (sendMessageEditor.iframe.contentDocument || sendMessageEditor.getWin().document);
    },
 
    init: function (userJID) {
        //打开document对象，向其写入初始化内容，以兼容FireFox
        var doc = sendMessageEditor.getDoc();
        doc.open();
        var html = [
            '<html>', 
            '<head><style type="text/css">body{border:0;margin:0;padding:3px;height:98%;cursor:text;background-color:white;font-size:12px;font-family:Courier,serif,monospace;}</style></head>',
            '<body jid="', userJID, '"></body>', 
            '</html>'].join("");
        doc.write(html);
        //打开document对象编辑模式
        doc.designMode = "on";
        doc.close();
    },
 
     getContent: function () {
         var doc = sendMessageEditor.getDoc();
         //获取编辑器的body对象
        var body = doc.body || doc.documentElement;
        //获取编辑器的内容
        var content = body.innerHTML;
        //对内容进行处理，例如替换其中的某些特殊字符等等
        //Some code
        
        //返回内容
        return content;
     },
     
      //统一的执行命令方法
    execCmd: function (cmd, value, d){
        var doc = d || sendMessageEditor.getDoc();
        //doc对象的获取参照上面的代码
        //调用execCommand方法执行命令
        doc.execCommand(cmd, false, value === undefined ? null : value);
    },
    
    getStyleState: function (cmd) {
        var doc = sendMessageEditor.getDoc();
        //doc对象的获取参考上面的对面
        //光标处是否是粗体
        var state = doc.queryCommandState(cmd);
        if(state){
          //改变按钮的样式
        }
        return state;
    },
    insertAtCursor: function (text, d, w){
        var doc = d || sendMessageEditor.getDoc();
        var win = w || sendMessageEditor.getWin();
        //win对象的获取参考上面的代码
        if (/msie/.test(agent)) {
            win.focus();
            var r = doc.selection.createRange();
            if (r) {
                r.collapse(true);
                r.pasteHTML(text);      
            }
        } else if (/gecko/.test(agent) || /opera/.test(agent)) {
            win.focus();
            sendMessageEditor.execCmd('InsertHTML', text, doc);
        } else if (/safari/.test(agent)) {
            sendMessageEditor.execCmd('InsertText', text, doc);
        }
    }
};

chat.css 样式

/**
 * function: im web chat css
 * author: hoojo
 * createDate: 2012-5-26 上午11:42:10
 */
@CHARSET "UTF-8";
 
* {
    font-family: Courier,serif,monospace;
    font-size: 12px;
}
 
.chat-main {
    position: absolute;
    /*right: 80px;*/
    left: 50px;
    top: 20px;
    z-index: 999;
    display: none;
}
 
.chat-main .radius {
    background-color: white;
    border: 8px solid #94CADF;
    border-radius: 1em;
}
 
#chat {
    position: relative;
    /*left: 150px;*/
    padding: 0;
    margin: 0;
}
#chat table {
    border-collapse: collapse;
    width: 435px;
    *width: 460px;
    /*width: 410px;*/
    /*width: 320px;*/
}
 
#chat table .title {
    font-weight: bold;
    color: green;
    padding: 3px;
    background-color: #94CADF;
}
 
/* 收缩条 */
#chat table .split {
    background-color: #94CADF;
    cursor: pointer;
}
 
/* ################## product info #################### */
#chat table .product-info {
    width: 30%;
    /*display: none;*/
    padding: 0;
    margin: 0;
    vertical-align: top;
}
 
#chat table .product-info ul {
    margin: 0;
    padding: 0;
}
 
#chat table .product-info ul div.header {
    background-color: #EBEFFE;
    line-height: 22px;
    font-size: 12px;
    color: black;
}
 
#chat table .product-info ul li {
    list-style: none outside none;
    background-color: white;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-left: 5px;
    line-height: 22px;
    font-size: 11px;
    color: #6F6F6F;
    width: 140px;
}
 
#chat table .product-info ul li.pic {
    height: 200px;
    padding: 0 5px 0 5px;
    border: 1px dashed #ccc;
    text-align: center;
}
 
#chat table .product-info ul li.pic img {
}
 
#chat table .product-info ul li.product-name {
    font-weight: bold;
    color: black;
}
 
#chat table .product-info ul li.price span {
    font-family: Courier;
    font-size: 16px;
    font-weight: bold;
    color: #ED4E08;
}
 
#chat table .product-info ul li.market-price s {
    color: black;
}
 
#chat table .product-info ul li a {
    float: right;
}
 
#chat table .product-info ul li.info {
    display: none;
}
 
/*########### 接收消息区域 ############ */
#chat table .receive-message {
    height: 250px;
}
 
#chat table .send-message {
    width: 100%;
    /*height: auto;*/
}
 
#chat table td {
    /*border: 1px solid white;*/
}
 
#chat table .bottom-bar {
    background-color: #94CADF;
    text-align: right;
}
 
/* ############## 工具条 ################# start */
#chat table .tool-bar {
    height: 25px;
    background-color: #94CADF;
}
 
#chat table .tool-bar select {
    float: left;
}
 
#chat table .tool-bar select.family {
    width: 45px;
    *width: 55px;
}
 
#chat table .tool-bar div {
    width: 17px;
    height: 16px;
    float: left;
    cursor: pointer;
    margin-right: 2px;
    margin-top: 1px;
    *margin-top: 2px;
    background: transparent url("../images/tb-sprite.gif") no-repeat scroll 0 0;
}
 
#chat table .tool-bar .color {
    margin-left: 2px;
    background-position: -159px 0;
}
#chat table .tool-bar .bold {
    /*background-position: 0 0;*/
}
#chat table .tool-bar .italic {
    background-position: -18px 0;
}
#chat table .tool-bar .underline {
    background-position: -32px 0;
}
#chat table .tool-bar .face {
    margin: 2px 0 0 3px;
    background-image: url("../images/facehappy.gif");
}
#chat table .tool-bar .history {
    background-image: none;
    width: 60px;
    float: right;
    margin-top: 3px;
    font-size: 12px;
    display: none;
}
/* ###### 表情 ###### */
#chat #face {
    border: 1px solid black;
    width: 275px;
    *width: 277px;
    position: relative;
    left: 8px;
    top: -370px;
    _top: -359px;
    z-index: 3;
    display: none;
}
 
#chat #face img {
    border: 1px solid #ccc;
    border-right: none;
    border-bottom: none; 
    cursor: pointer;
}
 
#send {
    width: 90px;
    height: 25px;
}
#close {
    width: 40px;
    height: 25px;
}

 

local.chat-2.0.js 核心js代码

/***
 * jquery local chat
 * @version v2.0 
 * @createDate -- 2012-5-28
 * @author hoojo
 * @email hoojo_@126.com
 * @requires jQuery v1.2.3 or later, send.message.editor-1.0.js
 * Copyright (c) 2012 M. hoo
 **/
 
;(function ($) {
 
    if (/1\.(0|1|2)\.(0|1|2)/.test($.fn.jquery) || /^1.1/.test($.fn.jquery)) {
        alert('WebIM requires jQuery v1.2.3 or later!  You are using v' + $.fn.jquery);
        return;
    }
    
    var _im = $.IM = {};
    _im.version = 2.0;
    
    var faceTimed, count = 0;
    
    _im.defaultOptions = {
    
        chat: "#chat",
        chatEl: function () {
            var $chat = _im.defaultOptions.chat;
            if ((typeof _im.defaultOptions.chat) == "string") {
                $chat = $(_im.defaultOptions.chat);
            } else if ((typeof _im.defaultOptions.chat) == "object") {
                if (!$chat.get(0)) {
                    $chat = $($chat);
                }
            } 
            return $chat;
        },
        sendMessageIFrame: function (receiverId) {
            return $("iframe[name='sendMessage" + receiverId + "']").get(0).contentWindow;
        },
        receiveMessageDoc: function (receiverId) {
            receiverId = receiverId || "";
            var docs = [];
            $.each($("iframe[name^='receiveMessage" + receiverId + "']"), function () {
                docs.push($(this.contentWindow.document));
            });
            return docs;
            //return $($("iframe[name^='receiveMessage" + receiverId + "']").get(0).contentWindow.document);
        },
        sender: "", // 发送者
        receiver: "", // 接收者
        setTitle: function (chatEl) {
            var receiver = this.getReceiver(chatEl);
            chatEl.find(".title").html("和" + receiver + "聊天对话中");
        },
        getReceiver: function (chatEl) {
            var receiver = chatEl.attr("receiver");
            if (~receiver.indexOf("@")) {
                receiver = receiver.split("@")[0];
            }
            return receiver;
        },
        
        // 接收消息iframe样式
        receiveStyle: [
            '<html>',
                '<head><style type="text/css">',
                'body{border:0;margin:0;padding:3px;height:98%;cursor:text;background-color:white;font-size:12px;font-family:Courier,serif,monospace;}',
                '.msg{margin-left: 1em;}p{margin:0;padding:0;}.me{color: blue;}.you{color:green;}',
                '</style></head>',
                '<body></body>',
            '</html>'
        ].join(""),
        writeReceiveStyle: function (receiverId) {
            this.receiveMessageDoc(receiverId)[0].get(0).write(this.receiveStyle);
        },
        
        /***
         * 发送消息的格式模板                    
         * flag = true 表示当前user是自己，否则就是对方
         **/ 
        receiveMessageTpl: function (userName, styleTpl, content, flag) {
            var userCls = flag ? "me" : "you";
            // 设置当前发送日前
            var date = new Date();
            var datetime = date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate();
            datetime = " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
            if (styleTpl && flag) {
                content = [ "<span style='", styleTpl, "'>", content, "</span>" ].join("");
            }
            return [
                '<p class="', userCls, '">', datetime, '  ', userName, ':</p>',
                '<p class="msg">', content, '</p>'
            ].join("");
        },
        
        // 工具类按钮触发事件返回html模板
        sendMessageStyle: {
             cssStyle: {
                 bold: "font-weight: bold;",
                 underline: "text-decoration: underline;",
                 italic: "font-style: oblique;"
             },
             setStyle: function (style, val) {
                 if (val) {
                     _im.defaultOptions.sendMessageStyle[style] = val;
                 } else {
                     var styleVal = _im.defaultOptions.sendMessageStyle[style];
                     if (styleVal === undefined || !styleVal) {
                         _im.defaultOptions.sendMessageStyle[style] = true;
                     } else {
                         _im.defaultOptions.sendMessageStyle[style] = false;
                     }
                 }
             },
             getStyleTpl: function () {
                 var tpl = "";
                 $.each(_im.defaultOptions.sendMessageStyle, function (style, item) {
                     //alert(style + "#" + item + "#" + (typeof item));
                     if (item === true) {
                         tpl += _im.defaultOptions.sendMessageStyle.cssStyle[style];
                     } else if ((typeof item) === "string") {
                         //alert(style + "-------------" + sendMessageStyle[style]);
                         tpl += style + ":" + item + ";";
                     }
                 });
                 return tpl;
             }
        },
        // 向接收消息iframe区域写消息
        writeReceiveMessage: function (receiverId, userName, content, flag) {
            if (content) {
                // 发送消息的样式
                var styleTpl = _im.defaultOptions.sendMessageStyle.getStyleTpl();
                var receiveMessageDoc = _im.defaultOptions.receiveMessageDoc(receiverId);
                $.each(receiveMessageDoc, function () {
                    var $body = this.find("body");
                    // 向接收信息区域写入发送的数据
                    $body.append(_im.defaultOptions.receiveMessageTpl(userName, styleTpl, content, flag));
                    // 滚动条滚到底部
                    this.scrollTop(this.height());
                });
            }
        },
        // 发送消息
        sendHandler: function ($chatMain) {
            var doc = $chatMain.find("iframe[name^='sendMessage']").get(0).contentWindow.document;
            
            var content = doc.body.innerHTML;
            content = $.trim(content);
            content = content.replace(new RegExp("<br>", "gm"), "");
            // 获取即将发送的内容
            if (content) {
                var sender = $chatMain.attr("sender");
                var receiverId = $chatMain.attr("id");
                // 接收区域写消息
                _im.defaultOptions.writeReceiveMessage(receiverId, sender, content, true);
                
                //############# XXX
                var receiver = $chatMain.find("#to").val();
                //var receiver = $chatMain.attr("receiver");
                // 判断是否是手机端会话，如果是就发送纯text，否则就发送html代码
                var flag = _im.defaultOptions.isMobileClient(receiver);
                if (flag) {
                    var text = $(doc.body).text();
                    text = $.trim(text);
                    if (text) {
                        // 远程发送消息
                        //remote.jsjac.chat.sendMessage(text, receiver);
                    }
                } else { // 非手机端通信 可以发送html代码
                    var styleTpl = _im.defaultOptions.sendMessageStyle.getStyleTpl();
                    content = [ "<span style='", styleTpl, "'>", content, "</span>" ].join("");
                    //remote.jsjac.chat.sendMessage(content, receiver);
                }
                
                // 清空发送区域
                $(doc).find("body").html("");
            }
        }, 
        
        faceImagePath: "images/emotions/",
        faceElTpl: function (i) {
            return [
                "<img src='",
                this.faceImagePath,
                (i - 1),
                "fixed.bmp' gif='",
                this.faceImagePath,
                (i - 1),
                ".gif'/>"
            ].join("");
        },
        // 创建表情html elements
        createFaceElement: function ($chat) {
            var faces = [];
            for (var i = 1; i < 100; i++) {
                 faces.push(this.faceElTpl(i));
                 if (i % 11 == 0) {
                     faces.push("<br/>");
                 } 
            }
            $chat.find("#face").html(faces.join(""));
            this.faceHandler($chat);
        },
        // 插入表情
        faceHandler: function ($chat) {
            $chat.find("#face img").click(function () {
                 $chat.find("#face").hide(150);
                 var imgEL = "<img src='" + $(this).attr("gif") + "'/>";
                 var $chatMain = $(this).parents(".chat-main");
                 var win = $chatMain.find("iframe[name^='sendMessage']").get(0).contentWindow;
                 var doc = win.document;
                 sendMessageEditor.insertAtCursor(imgEL, doc, win);
            });
            // 表情隐藏
            $chat.find("#face, #face img").mouseover(function () {
                window.clearTimeout(faceTimed);
            }).mouseout(function () {
                window.clearTimeout(faceTimed);
                faceTimed = window.setTimeout(function () {
                    $chat.find("#face").hide(150);
                }, 700);
            });
        },
        /***
         * 发送消息工具栏按钮事件方法
         **/
        toolBarHandler: function () {
            var $chat = $(this).parents(".chat-main");
            var targetCls = $(this).attr("class");
            if (targetCls == "face") {
                $chat.find("#face").show(150);
                window.clearTimeout(faceTimed);
                faceTimed = window.setTimeout(function () {
                    $chat.find("#face").hide(150);
                }, 1000);
            } else if (this.tagName == "DIV") {
                _im.defaultOptions.sendMessageStyle.setStyle(targetCls);
            } else if (this.tagName == "SELECT") {
                _im.defaultOptions.sendMessageStyle.setStyle($(this).attr("name"), $(this).val());
                if ($(this).attr("name") == "color") {
                    $(this).css("background-color", $(this).val());
                }
            }
            
            // 设置sendMessage iframe的style css
            _im.defaultOptions.writeSendStyle();
        },
        // 设置sendMessage iframe的style css
        writeSendStyle: function () {
            var styleTpl = _im.defaultOptions.sendMessageStyle.getStyleTpl();
            var styleEL = ['<style type="text/css">body{', styleTpl,'}</style>'].join("");
            
            $("body").find("iframe[name^='sendMessage']").each(function () {
                var $head = $(this.contentWindow.document).find("head");
                if ($head.find("style").size() > 1) {
                    $head.find("style:gt(0)").remove();
                }
                if (styleTpl) {
                    $head.append(styleEL);
                }
            });
        },                
        
        isMobileClient: function (receiver) {
            return false;
        },
 
        chatLayoutTemplate: function (userJID, sender, receiver, product, flag) {
            var display = "";
            if (flag) {
                display = "style='display: none;'";
            }
            return [
            '<div class="chat-main" id="', userJID,
                '" sender="', sender, '" receiver="', receiver, '">',
                /*'<form name="userForm">',
                    '用户名：<input type="text" name="userName" value="boy"/>',
                    '密码：<input type="password" name="password" value="boy"/>',
                    
                    'register: <input type="checkbox" name="register"/>',
                    'sendTo： <input type="text" id="to" name="to" value="hoojo" />',
                    '<input type="button" value="Login" id="login"/> &nbsp;&nbsp;&nbsp;&nbsp;',
                    '<input type="button" value="Logout" id="logout"/>',
                '</form>',*/
                    
                '<div id="chat"><div class="radius">',
                    '<table>',
                        '<tr>',
                            '<td colspan="3" class="title"></td>',
                        '</tr>',
                        '<tr>',
                            '<td class="receive-message">',
                                '<iframe name="receiveMessage', userJID,'" frameborder="0" width="100%" height="100%"></iframe>',
                            '</td>',
                            '<td rowspan="4" class="split" ', display, '>&nbsp;</td>',
                            '<td rowspan="4" class="product-info" ', display, '>',
                                '<ul>',
                                    '<div class="header">&nbsp;商品详情</div>',
                                    '<li class="pic">',
                                    '<img src="', product.pic, '"/></li>',
                                    '<li class="product-name">', product.name, '</li>',
                                    '<li class="price">团购价：<span>', product.price, '</span>元</li>',
                                    '<li class="market-price">市场价：<s><i>', product.marketPrice, '</i></s>元</li>',
                                    '<li>快递公司：', product.deliverOrgs, '</li>',
                                    '<li>仓库：', product.wareHouses, '</li>',
                                    product.skuAttrs,
                                '</ul>',
                            '</td>',
                        '</tr>',
                        '<tr class="tool-bar">',
                            '<td>',
                                '<select name="font-family" class="family">',
                                    '<option>宋体</option>',
                                    '<option>黑体</option>',
                                    '<option>幼圆</option>',
                                    '<option>华文行楷</option>',
                                    '<option>华文楷体</option>',
                                    '<option>华文楷体</option>',
                                    '<option>华文彩云</option>',
                                    '<option>华文隶书</option>',
                                    '<option>微软雅黑</option>',
                                    '<option>Fixedsys</option>',
                                '</select>',
                                
                                '<select name="font-size">',
                                    '<option value="12px">大小</option>',
                                    '<option value="10px">10</option>',
                                    '<option value="12px">12</option>',
                                    '<option value="14px">14</option>',
                                    '<option value="16px">16</option>',
                                    '<option value="18px">18</option>',
                                    '<option value="20px">20</option>',
                                    '<option value="24px">24</option>',
                                    '<option value="28px">28</option>',
                                    '<option value="36px">36</option>',
                                    '<option value="42px">42</option>',
                                    '<option value="52px">52</option>',
                                '</select>',
                                '<select name="color">',
                                    '<option value="" selected="selected">颜色</option>',
                                    '<option value="#000000" style="background-color:#000000"></option>',
                                    '<option value="#FFFFFF" style="background-color:#FFFFFF"></option>',
                                    '<option value="#008000" style="background-color:#008000"></option>',
                                    '<option value="#800000" style="background-color:#800000"></option>',
                                    '<option value="#808000" style="background-color:#808000"></option>',
                                    '<option value="#000080" style="background-color:#000080"></option>',
                                    '<option value="#800080" style="background-color:#800080"></option>',
                                    '<option value="#808080" style="background-color:#808080"></option>',
                                    '<option value="#FFFF00" style="background-color:#FFFF00"></option>',
                                    '<option value="#00FF00" style="background-color:#00FF00"></option>',
                                    '<option value="#00FFFF" style="background-color:#00FFFF"></option>',
                                    '<option value="#FF00FF" style="background-color:#FF00FF"></option>',
                                    '<option value="#FF0000" style="background-color:#FF0000"></option>',
                                    '<option value="#0000FF" style="background-color:#0000FF"></option>',
                                    '<option value="#008080" style="background-color:#008080"></option>',
                                '</select>',
                                '<div class="bold"></div>',
                                '<div class="underline"></div>',
                                '<div class="italic"></div>',
                                '<div class="face"></div>',
                                '<div class="history">消息记录</div>',
                            '</td>',
                        '</tr>',
                        '<tr class="send-message">',
                            '<td>',
                                '<iframe name="sendMessage', userJID,'" width="100%" height="80px" frameborder="0"></iframe>',
                            '</td>',
                        '</tr>',
                        '<tr class="bottom-bar">',
                            '<td><input type="text" id="to" name="to" value="hoojo" style="width: 100px; display: none;"/><input type="button" value="关闭" id="close"/>&nbsp;',
                            '<input type="button" value="发送(Enter)" id="send"/> </td>',
                        '</tr>',
                    '</table></div>',
                    '<div id="face"></div>',
                '</div>',
            '</div>'
            ].join("");
        },
        
        initWebIM: function (userJID, receiver) {
            var product = {
                name: "小玩熊",
                pic: "http://avatar.csdn.net/9/7/A/2_ibm_hoojo.jpg",
                price: "198.00",
                marketPrice: "899.90",
                deliverOrgs: "EMS",
                wareHouses: "A库",
                skuAttrs: ""
            };
            var chatEl = $(_im.defaultOptions.chatLayoutTemplate(userJID, _im.defaultOptions.sender, receiver, product));
            $("body").append(chatEl);                        
            
            // 拖拽
            //$("#" + userJID).easydrag();
            // 初始化sendMessageEditor相关信息
            sendMessageEditor.iframe = this.sendMessageIFrame(userJID);
            sendMessageEditor.init(userJID);    
            
            this.setTitle(chatEl);
            this.writeReceiveStyle(userJID);
            this.writeSendStyle();
            this.createFaceElement(chatEl);
            
            // 查看更多详情
            chatEl.find(".more").click(function () {
                var $ul = $(this).parents("ul");
                $ul.find(".more").toggle();
                $ul.find(".info").toggle();
                $ul.find(".pic").toggle();
            });
            
            // 收缩详情
            chatEl.find(".split").toggle(function () {
                $(".product-info").hide();
                $(this).parents(".radius").css("border-right-width", "0");
            }, function () {
                $(".product-info").show();
                $(this).parents(".radius").css("border-right-width", "8px");
            });
            
            // 工具类绑定事件 settings.toolBarHandler
            chatEl.find(".tool-bar td").children().click(this.toolBarHandler);
             chatEl.find("#send").click(function () {
                 var $chatMain = $(this).parents(".chat-main");
                _im.defaultOptions.sendHandler($chatMain);
             });
             chatEl.find("#close").click(function () {
                 var $chatMain = $(this).parents(".chat-main");
                $chatMain.hide(500);
             });
             
             $(this.sendMessageIFrame(userJID).document).keyup(function (event) {
                 var e = event || window.event;
                 var keyCode = e.which || e.keyCode;
                 if (keyCode == 13) {
                     var $chatMain = $("#" + $(this).find("body").attr("jid"));
                     _im.defaultOptions.sendHandler($chatMain);
                 }
             });
        },
        // 取消闪动提示
        cancelFlashTip: function (jid) {
            var $chat = $(".chat-main[id='" + jid + "']:hidden");
            if ($chat.get(0)) {
                $chat.show();
            }
            //$chatMessage.removeAttr("jid");
            if ($(".chat-main:hidden").size() == 0) {
                $(".have-msg").hide();
                $(".no-msg").show();
            }
        },
                
        // 消息提示
        messageTip: function () {
            if (count % 2 == 0) {
                window.focus();
                document.title = "你来了新消息，请查收！";
            } else {
                document.title = "";                
            }
            if (count > 4) {
                document.title = "";    
                count = 0;            
            } else {
                window.setTimeout(_im.defaultOptions.messageTip, 1000);
                count ++;
            }
        }
    };
    
    
    $.extend({
        WebIM: function (opts) {
            opts = opts || {};
            // 覆盖默认配置
            _im.defaultOptions = $.extend(_im.defaultOptions, _im.defaultOptions, opts);
            var settings = $.extend({}, _im.defaultOptions, opts);    
            settings.initWebIM("user-jid", settings.receiver);
        }
    });
})(jQuery);
掠夺者TL
关注
专栏目录
jquery制作的webIM(原创)
03-01
web IM 支持修改高度宽度 支持滚动条 博文链接：https://gznofeng.iteye.com/blog/211212
WebIM是一款基于jQuery的一款web即时通讯插件
10-12
WebIM说明 WebIM是一款基于jQuery的一款web即时通讯插件，姑且这么称呼吧。插件最大程度实现了IM的常用功能，除即时通讯的常用功能外，还加入了：消息盒子、窗口抖动、添加删除好友、最近联系人、超时登录界面、网站小秘书、聊天记录、发送频率限制、发送产品、发送名片、发送表情、产品分享、黑名单、举报、收藏、公告、智能网址过滤、消息提醒、修改资料、名片二维码、禁止粘贴、收起联系人列表、推荐好友等30余项改进。全浏览器兼容。 插件调用简单方便，只需在现有的web系统中加入几行代码，理论上可嵌入任何web系统。 2012年项目，已不再维护。 配置 $(function() { $(document).FnWebIM({ autoLogin :true, //boolean型，默认是否自动登录，true：自动登录，false：手动登录，默认为true msgRefreshTime :1000, //number型，消息刷新时间，单位为ms friendRefreshTime :10000, //number型，好友刷新时间，单位为ms showSecretary :true, //boolean型，默认是否显示小秘书，true：显示，false：不显示，默认为true noticeContent :"唐僧师徒历经千辛万苦，终于见到了佛祖……", //string型，公告内容 为空时不显示公告 sendPicture :true, //boolean型，是否允许发送图片，true：允许，false：不允许，默认为true msgMaxSize :300, //number型，单条消息最大允许字符 msgSound :false, //boolean型，是否开启声音提醒，true：开启，false:关闭，默认为true defaultWindow :"" //string型，登录后打开新聊天窗口，此处接收的参数为联系人的uid，否则会出错 }); }); 详细说明文档 http://www.zi-han.net/case/im/help.html 示例 http://www.zi-han.net/developer/721.html 注意 请在服务器（如localhost）环境下打开
JQuery详细使用
最新发布
qq_71775591的博客
09-20 2877
JavaScript 库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画 animate、hide、show 等。 简单理解就是一个 JS 文件，里面对原生 JS 代码进行了封装，存放到里面。这样我们就可以快速而方便的使用封装好的功能。 比如 jQuery，就是为了快速方便的操作 DOM，里面基本都是函数（方法）。 常见的 JavaScript 库：jQuery、Prototype、YUI、Dojo、Ext
webim - 网页即时通讯系统详细注释教学版(教科书式保姆级操作)
06-07
- 客户端：通常使用JavaScript库（如jQuery或React）实现，处理用户界面交互和WebSocket连接。 - 服务端：处理连接管理、消息路由、用户认证等功能，可能采用Node.js、Java或其他后端语言实现。 - 数据库：存储...
asp仿QQ聊天工具
12-22
这种聊天工具在Web环境中运行，允许用户通过浏览器进行实时通信，无需安装额外的客户端软件。下面将详细探讨ASP、QQ聊天功能以及WebIM等相关知识点。 **ASP（Active Server Pages）** ASP是微软公司开发的一种...
WebIM-for-Struts2 v1.0
10-06
WebSocket是一种在客户端和服务器之间建立长连接的技术，允许双方进行双向通信。在Struts2中，可能需要使用第三方库（如Atmosphere或Jetty WebSocket）来支持WebSocket。 4. **JSON数据交换**：在WebSocket通信中，...
iChat:基于php + swoole的webim系统
03-11
前端部分可能使用JavaScript（如jQuery）、Vue.js或React.js等库或框架实现，构建用户友好的界面，处理与后端的WebSocket通信，动态显示聊天内容。 7. **安全与隐私保护**： iChat需要确保用户数据的安全，这涉及...
毕业设计：基于PHP+ swoole的webim系统.zip
11-14
- WebIM系统通常包括客户端和服务器端两部分，提供实时的文本、语音、视频聊天功能。 - 在这个项目中，客户端可能是基于JavaScript或Websocket技术构建的，与服务器保持长连接，实现消息的实时推送。 - 服务器端...
在线聊天demo（html5+jquery+websocket+netty4+spring3）
03-19
在线聊天demo html5 jquery websocket netty4 spring3
JavaScript/jQuery、HTML、CSS 构建 Web IM 远程及时聊天通信程序
weixin_34290096的博客
05-30 59
http://www.cnblogs.com/hoojo/archive/2012/08/13/2635779.html 转载于:https://blog.51cto.com/yerik/1419891
即时通讯
lorry1113的专栏
12-22 196
IM(InstantMessaging 即时通讯,实时传讯) 这是一种可以让使用者在网络上建立某种私人聊天室（chatroom）的实时通讯服务。 到底什么才算是实时，至少我认为 我们将要实现的不算是实时，我们将要通过“轮询”实现。如果刚接触 Ajax 或者仅对该领域有所了解，“轮询” 的概念可能让您感到害怕。不幸的是，轮询是惟一的办法。要在客户机和服务器之间建立连续管...
jquery两人对话聊天窗口js特效
ICode联盟
11-11 374
下载地址 漂亮的对话气泡样式，基于jquery实现的两人对话聊天窗口特效 dd:
小程序集成极光IM sendSocketMessage:fail WebSocket is not connected解决办法
热门推荐
w492841335的博客
08-07 1万+
小程序集成极光IM sendSocketMessage:fail WebSocket is not connected解决办法 问题.小程序报了异常 sendSocketMessage:fail WebSocket is not connected 解决方法： 因为小程序只有五个socket通道，出了这个说明初始化JMessage太多了，超出了5个，我这里的解决方法是在，app.js中做初始化。全...
NextIM3.1：领先的社区网站WebIM解决方案
同时，NextIM3.1还支持与XMPP开放协议的集成，这意味着WebIM用户可以与使用XMPP协议的各种桌面和智能手机客户端进行交互，构建起社区的完整独立即时通信系统。 在功能层面，NextIM的总体界面设计遵循了极简主义，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值