IBM_hoojo

[置顶] JavaScript/jQuery、HTML、CSS 构建 Web IM 远程及时聊天通信程序

这篇文章主要介绍用JavaScript和jQuery、HTML、CSS以及用第三方聊天JavaScript（jsjac）框架构建一个BS Web的聊天应用程序。此程序可以和所有连接到Openfire服务器的应用进行通信、发送消息。如果要运行本程序还需要一个聊天服务器Openfire，

以及需要用到Http方式和Openfire通信的第三方库（JabberHTTPBind）。

JabberHTTPBind是jabber提供的XMPP协议通信的Http bind发送的形式，它可以完成WebBrowser和Openfire建立长连接通信。

主要通信流程如下图所示：

用户A通过JavaScript jsjac.js库发送一条消息到JabberHTTPBind这个Servlet容器，然后JabberHTTPBind的Servlet容器会向Openfire发送XMPP协议的XML报文。Openfire Server接收到报文后解析，然后发送给指定的用户B。JabberHTTPBind获取到Openfire Server发送的数据后，解析报文向当前Servlet容器中的链接的Session中找到指定的用户再发送数据给用户B。

WebBrowser端用的是jsjac和JabberHTTPBind建立的连接，所有数据都要经过JabberHTTPBind解析/转换发送给Openfire。

先上张图看看效果，呵呵~这里是用户hoojo和girl的聊天画面，双方在进行互聊……

可以发送表情、改变字体样式（对方界面也可以看到你的字体样式），同时右侧是显示/收缩详情的信息

收缩详情

聊天界面部分截图

用户登录、注册，sendTo表示你登录后向谁发送聊天消息、并且建立一个聊天窗口

登录成功后，你可以在日志控制台看到你的登陆状态、或是在firebug控制台中看到你的连接请求状态

登陆失败

只有connecting，就没有下文了

登陆成功后，你就可以给指定用户发送消息，且设置你想发送消息的新用户点击new Chat按钮创建新会话

如果你来了新消息，在浏览器的标题栏会有新消息提示

如果你当前聊天界面的窗口都是关闭状态，那么在右下角会有消息提示的闪动图标

这里已经贴出了所有的源代码了，如果你非常的需要源代码（但我希望你能自己创建一个工程去复制源代码，这是我希望看到的），那么你可以通过以下方式联系我

Email：[email protected]

Blog：http://blog.csdn.net/IBM_hoojo

http://hoojo.cnblogs.com/

http://hoojo.blogjava.net

注：我不会保证在第一时间给你代码，但我会在空闲的时间给你发送源码

导读

如果你对openfire还不是很了解或是不知道安装，建议你看看这2篇文章

http://www.cnblogs.com/hoojo/archive/2012/05/17/2506769.html

http://www.cnblogs.com/hoojo/archive/2012/05/13/2498151.html

因为这里还用到了JabberHTTPBind 以及在使用它或是运行示例的时候会遇到些问题，那么你可以看看这篇文章

http://www.cnblogs.com/hoojo/archive/2012/05/17/2506845.html

开发环境

System：Windows

JavaEE Server：Tomcat 5.0.28+/Tomcat 6

WebBrowser：IE6+、Firefox3.5+、Chrome 已经兼容浏览器

JavaSDK：JDK 1.6+

Openfire 3.7.1

IDE：eclipse 3.2、MyEclipse 6.5

开发依赖库

jdk1.4+

serializer.jar
xalan.jar
jhb-1.0.jar

log4j-1.2.16.jar

jhb-1.0.jar 这个就是JabberHTTPBind，我把编译的class打成jar包了

JavaScript lib

jquery.easydrag.js 窗口拖拽JavaScript lib
jquery-1.7.1.min.js jquery lib
jsjac.js 通信核心库
local.chat-2.0.js 本地会话窗口发送消息JavaScript库
remote.jsjac.chat-2.0.js 远程会话消息JavaScript库
send.message.editor-1.0.js 窗口编辑器JavaScript库

一、准备工作

jsjac JavaScript lib下载：https://github.com/sstrigler/JSJaC/

如果你不喜欢用jsjac JavaScript lib和Openfire通信，那么有一款jQuery的plugin可以供你使用，下载地址

jQuery-XMPP-plugin https://github.com/maxpowel/jQuery-XMPP-plugin

这里有所以能支持Openfire通信的第三方库，有兴趣的可以研究下 http://xmpp.org/xmpp-software/libraries/

jquery.easydrag 下载：http://fromvega.com/code/easydrag/jquery.easydrag.js

jquery 下载：http://code.jquery.com/jquery-1.7.1.min.js

JabberHTTPBind jhb.jar 下载：http://download.csdn.net/detail/ibm_hoojo/4489188

images 图片素材：http://download.csdn.net/detail/ibm_hoojo/4489439

工程目录结构

二、核心代码演示

1、主界面（登陆、消息提示、日志、建立新聊天窗口）代码 index.jsp

<%@ page language="java" pageEncoding="UTF-8" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>WebIM Chat</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="author" content="hoojo">
    <meta http-equiv="email" content="[email protected]">
    <meta http-equiv="blog" content="http://blog.csdn.net/IBM_hoojo">
    <meta http-equiv="blog" content="http://hoojo.cnblogs.com">
    <link rel="stylesheet" type="text/css" href="css/chat-2.0.css" />
    <script type="text/javascript">
        window.contextPath = "<%=path%>";
        window["serverDomin"] = "192.168.8.22";
    </script>
    <script type="text/javascript" src="jslib/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="jslib/jsjac.js"></script>
    <!-- script type="text/javascript" src="debugger/Debugger.js"></script-->
    <script type="text/javascript" src="jslib/send.message.editor-1.0.js"></script>
    <script type="text/javascript" src="jslib/jquery.easydrag.js"></script>
    <script type="text/javascript" src="jslib/remote.jsjac.chat-2.0.js"></script>
    <script type="text/javascript" src="jslib/local.chat-2.0.js"></script>
    <script type="text/javascript">
        $(function () {
            
            $("#login").click(function () {
                var userName = $(":text[name='userName']").val();
                var receiver = $("*[name='to']").val();
                // 建立一个聊天窗口应用，并设置发送者和消息接收者
                $.WebIM({
                    sender: userName,
                    receiver: receiver
                });
                // 登陆到openfire服务器
                 remote.jsjac.chat.login(document.userForm);
                 $("label").text(userName);
                 $("form").hide();
                 $("#newConn").show();
            });
            
            $("#logout").click(function () {
                 // 退出openfire登陆，断开链接
                 remote.jsjac.chat.logout();
                 $("form").show();
                 $("#newConn").hide();
                 $("#chat").hide(800);
            });
            
            $("#newSession").click(function () {
                var receiver = $("#sendTo").val();
                // 建立一个新聊天窗口，并设置消息接收者（发送给谁？）
                $.WebIM.newWebIM({
                    receiver: receiver
                });
            });
        });
    </script>
  </head>
  
  <body>
    <!-- 登陆表单 -->
    <form name="userForm" style="background-color: #fcfcfc; width: 100%;">
        userName：<input type="text" name="userName" value="boy"/>
        password：<input type="password" name="password" value="boy"/>
        
        register: <input type="checkbox" name="register"/>
        sendTo： <input type="text" id="to" name="to" value="hoojo" width="10"/>
        <input type="button" value="Login" id="login"/> 
    </form>
    <!-- 新窗口聊天 -->
    <div id="newConn" style="display: none; background-color: #fcfcfc; width: 100%;">
           User：<label></label>
           sendTo： <input type="text" id="sendTo" value="hoojo" width="10"/>
           <input type="button" value="new Chat" id="newSession"/> 
           <input type="button" value="Logout" id="logout"/>
    </div>
    <!-- 日志信息 -->
    <div id="error" style="display: ; background-color: red;"></div>
    <div id="info" style="display: ; background-color: #999999;"></div>
    <!-- 聊天来消息提示 -->
    <div class="chat-message">
        <img src="images/write_icon.png" class="no-msg"/>
        <img src="images/write_icon.gif" class="have-msg" style="display: none;"/>
    </div>
  </body>
</html>

下面这段代码尤为重要，它是设置你链接openfire的地址。这个地址一段错误你将无法进行通信！

<script type="text/javascript">

    window.contextPath = "<%=path%>";

    window["serverDomin"] = "192.168.8.22";

</script>

$.WebIM方法是主函数，用它可以覆盖local.chat中的基本配置，它可以完成聊天窗口的创建。$.WebIM.newWebIM方法是新创建一个窗口，只是消息的接收者是一个新用户。
$.WebIM({
    sender: userName,
    receiver: receiver
});
 
$.WebIM.newWebIM({
    receiver: receiver
});

remote.jsjac.chat.login(document.userForm);方法是用户登录到Openfire服务器

参数如下：
httpbase: window.contextPath + "/JHB/", //请求后台http-bind服务器url
domain: window["serverDomin"], //"192.168.5.231", // 192.168.5.231 当前有效域名
username: "", // 登录用户名
pass: "", // 密码
timerval: 2000, // 设置请求超时
resource: "WebIM", // 链接资源标识
register: true // 是否注册
remote.jsjac.chat.logout();是退出、断开openfire的链接

2、本地聊天应用核心代码 local.chat-2.0.js

/***
 * jquery local chat
 * @version v2.0 
 * @createDate -- 2012-5-28
 * @author hoojo
 * @email [email protected]
 * @blog http://hoojo.cnblogs.com & http://blog.csdn.net/IBM_hoojo
 * @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 faceTimed, count = 0;
	
	var _opts = defaultOptions = {
		version: 2.0,
		chat: "#chat",
		chatEl: function () {
			var $chat = _opts.chat;
			if ((typeof _opts.chat) == "string") {
				$chat = $(_opts.chat);
			} else if ((typeof _opts.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);
		},
		
		datetimeFormat: function (v) {
			if (~~v < 10) {
				return "0" + v;
			}
			return v;
		},
		getDatetime: function () {
			// 设置当前发送日前
			var date = new Date();
			var datetime = date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate();
			datetime = " " + _opts.datetimeFormat(date.getHours()) 
						+ ":" + _opts.datetimeFormat(date.getMinutes()) 
						+ ":" + _opts.datetimeFormat(date.getSeconds());
			return datetime;
		},
		
		/***
		 * 发送消息的格式模板					
		 * flag = true 表示当前user是自己，否则就是对方
		 **/ 
		receiveMessageTpl: function (userName, styleTpl, content, flag) {
			var userCls = flag ? "me" : "you";
			if (styleTpl && flag) {
				content = [ "<span style='", styleTpl, "'>", content, "</span>" ].join("");
			}
			return [
				'<p class="', userCls, '">', _opts.getDatetime(), '  ', 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) {
		 			_opts.sendMessageStyle[style] = val;
		 		} else {
			 		var styleVal = _opts.sendMessageStyle[style];
			 		if (styleVal === undefined || !styleVal) {
			 			_opts.sendMessageStyle[style] = true;
			 		} else {
			 			_opts.sendMessageStyle[style] = false;
			 		}
		 		}
		 	},
		 	getStyleTpl: function () {
		 		var tpl = "";
		 		$.each(_opts.sendMessageStyle, function (style, item) {
		 			//alert(style + "#" + item + "#" + (typeof item));
		 			if (item === true) {
	 					tpl += _opts.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 = _opts.sendMessageStyle.getStyleTpl();
				var receiveMessageDoc = _opts.receiveMessageDoc(receiverId);
				$.each(receiveMessageDoc, function () {
					var $body = this.find("body");
					// 向接收信息区域写入发送的数据
					$body.append(_opts.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");
				// 接收区域写消息
				_opts.writeReceiveMessage(receiverId, sender, content, true);
				
				//############# XXX
				var receiver = $chatMain.find("#to").val();
				//var receiver = $chatMain.attr("receiver");
				// 判断是否是手机端会话，如果是就发送纯text，否则就发送html代码
				var flag = _opts.isMobileClient(receiver);
				if (flag) {
					var text = $(doc.body).text();
					text = $.trim(text);
					if (text) {
						// 远程发送消息
						remote.jsjac.chat.sendMessage(text, receiver);
					}
				} else { // 非手机端通信 可以发送html代码
					var styleTpl = _opts.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") {
				_opts.sendMessageStyle.setStyle(targetCls);
			} else if (this.tagName == "SELECT") {
				_opts.sendMessageStyle.setStyle($(this).attr("name"), $(this).val());
				if ($(this).attr("name") == "color") {
					$(this).css("background-color", $(this).val());
				}
			}
			
			// 设置sendMessage iframe的style css
			_opts.writeSendStyle();
		},
		// 设置sendMessage iframe的style css
		writeSendStyle: function () {
			var styleTpl = _opts.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) {
			var moblieClients = ["iphone", "ipad", "ipod", "wp7", "android", "blackberry", "Spark", "warning", "symbian"];
			var flag = false;
			for (var i in moblieClients) {
				if (~receiver.indexOf(moblieClients[i])) {
					return true;
				}
			}
			return false;
		},

		// 聊天界面html元素
		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, '">',
				    
			    '<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, '> </td>',
				    		'<td rowspan="4" class="product-info" ', display, '>',
				    			'<ul>',
				    				'<div class="header"> 商品详情</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;"/><input type="button" value="关闭" id="close"/> ',
				    		'<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 = $(_opts.chatLayoutTemplate(userJID, _opts.sender, receiver, product));
			$("body").append(chatEl);						
			
			// 拖拽
			$("#" + userJID).easydrag();
			// 初始化sendMessageEditor相关信息
			sendMessageEditor.iframe = this.sendMessageIFrame(userJID);
			sendMessageEditor.init(userJID);	
			
			_opts.setTitle(chatEl);
			_opts.writeReceiveStyle(userJID);
			_opts.writeSendStyle();
			_opts.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");
				_opts.sendHandler($chatMain);
		 	});
		 	chatEl.find("#close").click(function () {
		 		var $chatMain = $(this).parents(".chat-main");
				$chatMain.hide(500);
		 	});
		 	
		 	// 首先取消事件绑定，当一次性发多条消息的情况下会同时绑定多个相同事件
			$(".have-msg, .no-msg, .chat-main").unbind("click");
		 	$(".have-msg").bind("click", function () {
				$(this).hide();
				$(".no-msg").show();
				$(".chat-main:hidden").show(150);
			});
			
			$(".no-msg").click(function () {
				$(".chat-main:hidden").each(function (i, item) {
					var top = i * 10 + 50;
					var left = i * 20 + 50;
					$(this).show(500).css({top: top, left: left});
				});
			});
			
			$(".chat-main").click(function () {
				$(".chat-main").css("z-index", 9999);
				$(this).css({"z-index": 10000});
			});
		 	
		 	$(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"));
		 			_opts.sendHandler($chatMain);
		 		}
		 	});
		},
		
		// 建立新聊天窗口
		newWebIM: function (settings) {
			var chatUser = remote.userAddress(settings.receiver);
			var userJID = "u" + hex_md5(chatUser);
			_opts.initWebIM(userJID, chatUser);
			
			$("#" + userJID).find(remote.receiver).val(chatUser);
			$("#" + userJID).show(220);
		},
		
		// 远程发送消息时执行函数
		messageHandler: function (user, content) {
			var userName = user.split("@")[0];
			var tempUser = user;
			if (~tempUser.indexOf("/")) {
				tempUser = tempUser.substr(0, tempUser.indexOf("/"));
			}
			var userJID = "u" + hex_md5(tempUser);
			
			// 首次初始webIM
			if (!$("#" + userJID).get(0)) {
				// 初始IM面板；
				_opts.initWebIM(userJID, user);
			} 
			// 设置消息接受者的名称
			$("#" + userJID).find(remote.receiver).val(user);
			
			if ($("#" + userJID).get(0)) {
				// 消息提示
				if ($("div[id='" + userJID + "']:hidden").get(0)) {
					var haveMessage = $(".have-msg");
					haveMessage.show();
					$(".no-msg").hide();
				}
				
				_opts.messageTip("闪聊有了新消息，请查收！");
				// 向chat接收信息区域写消息
				remote.jsjac.chat.writeMessage(userJID, userName, content);
			} 
		},
		
		// 消息提示
		messageTip: function () {
			if (count % 2 == 0) {
				window.focus();
				document.title = "你来了新消息，请查收！";
			} else {
				document.title = "";				
			}
			if (count > 4) {
				document.title = "";	
				count = 0;			
			} else {
				window.setTimeout(_opts.messageTip, 1000);
				count ++;
			}
		}
	};
	
	// 初始化远程聊天程序相关方法
	var initRemoteIM = function (settings) {
		
		// 初始化远程消息
		remote.jsjac.chat.init();
		
		// 设置客户端写入信息方法
		remote.jsjac.chat.writeReceiveMessage = settings.writeReceiveMessage;
		
		// 注册事件
		$(window).bind({
		 	unload: remote.jsjac.chat.unloadHandler,
		 	error: remote.jsjac.chat.errorHandler,
		 	beforeunload: remote.jsjac.chat.logout
		});
	}
	
	$.extend({
		WebIM: function (opts) {
			opts = opts || {};
			// 覆盖默认配置
			defaultOptions = $.extend(defaultOptions, defaultOptions, opts);
			var settings = $.extend({}, defaultOptions, opts);	
			initRemoteIM(settings);
			
			settings.newWebIM(settings);
			
			$.WebIM.settings = settings;
		}
	});
	
	$.WebIM.settings = $.WebIM.settings || _opts;
	$.WebIM.initWebIM = _opts.initWebIM;
	$.WebIM.newWebIM = _opts.newWebIM;
	$.WebIM.messageHandler = _opts.messageHandler;
	
})(jQuery);

这里的方法基本上是聊天窗口上的应用，主要是本地聊天程序的js、HTML元素的操作。如字体、字体大小、颜色、表情、消息的发送等，不涉及到聊天消息发送的核心代码，其中有用到发送远程消息的方法。

remote.jsjac.chat.sendMessage(text, receiver); 这个是发送远程消息的方法，参数1是消息内容、参数2是消息的接收者

如果你有看到这篇文章http://www.cnblogs.com/hoojo/archive/2012/06/18/2553886.html 它是一个单纯的WebIM本地的聊天界面。

3、远程聊天JavaScript核心代码，它是和jsjac库关联的。

remote.jsjac.chat-2.0.js

/**
 * IM chat jsjac remote message
 * @author: hoojo
 * @email: [email protected]
 * @blog http://hoojo.cnblogs.com & http://blog.csdn.net/IBM_hoojo
 * @createDate: 2012-5-24
 * @version 2.0
 * @requires jQuery v1.2.3 or later
 * Copyright (c) 2012 M. hoo
 **/
 
var remote = {
	debug: "info, error",
	chat: "body",
	receiver: "#to", // 接受者jquery expression
	console: {
		errorEL: function () {
			if ($(remote.chat).get(0)) {
				return $(remote.chat).find("#error");
			} else {
				return $("body").find("#error");
			}
		},
		infoEL: function () {
			if ($(remote.chat).get(0)) {
				return $(remote.chat).find("#info");
			} else {
				return $("body").find("#info");
			}
		},
		// debug info
		info: function (html) {
			if (~remote.debug.indexOf("info")) {
				remote.console.infoEL().append(html);
				remote.console.infoEL().get(0).lastChild.scrollIntoView();
			}
		},
		// debug error
		error: function (html) {
			if (~remote.debug.indexOf("error")) {
				remote.console.errorEL().append(html); 
			}
		},
		// clear info/debug console
		clear: function (s) {
			if ("debug" == s) {
				remote.console.errorEL().html("");
			} else {
				remote.console.infoEL().html("");
			}
		}
	},
	
	userAddress: function (user) {
		if (user) {
			if (!~user.indexOf("@")) {
				user += "@" + remote.jsjac.domain;// + "/" + remote.jsjac.resource;
			} else if (~user.indexOf("/")) {
				user = user.substr(0, user.indexOf("/"));
			}
		}
		return user;
	},
	jsjac: {
		httpbase: window.contextPath + "/JHB/", //请求后台http-bind服务器url
		domain: window["serverDomin"], //"192.168.5.231", // 192.168.5.231 当前有效域名
		username: "",
		pass: "",
		timerval: 2000, // 设置请求超时
		resource: "WebIM", // 链接资源标识
		register: true // 是否注册
	}
};
remote.jsjac.chat = {
	writeReceiveMessage: function () {
	},
	setState: function () {
		var onlineStatus = new Object();
		onlineStatus["available"] = "在线";
		onlineStatus["chat"] = "欢迎聊天";
		onlineStatus["away"] = "离开";
		onlineStatus["xa"] = "不可用";
		onlineStatus["dnd"] = "请勿打扰";
		onlineStatus["invisible"] = "隐身";
		onlineStatus["unavailable"] = "离线";
		remote.jsjac.chat.state = onlineStatus;
		return onlineStatus;
	},
	state: null,
	init: function () {
		// Debugger plugin
		if (typeof (Debugger) == "function") {
			remote.dbger = new Debugger(2, remote.jsjac.resource);
			remote.dbger.start();
		} else {
	    	// if you're using firebug or safari, use this for debugging
	    	// oDbg = new JSJaCConsoleLogger(2);
	    	// comment in above and remove comments below if you don't need debugging
			remote.dbger = function () {
			};
			remote.dbger.log = function () {
			};
		}
		
		try { 
			// try to resume a session
			if (JSJaCCookie.read("btype").getValue() == "binding") {
				remote.connection = new JSJaCHttpBindingConnection({ "oDbg": remote.dbger});
				rdbgerjac.chat.setupEvent(remote.connection);
				if (remote.connection.resume()) {
					remote.console.clear("debug");
				}
			} 
		} catch (e) {
			remote.console.errorEL().html(e.name + ":" + e.message);
		} // reading cookie failed - never mind
		
		remote.jsjac.chat.setState();
	},
	login: function (loginForm) {
		remote.console.clear("debug"); // reset
		try {
			// 链接参数
			var connectionConfig = remote.jsjac;
			
			// Debugger console
			if (typeof (oDbg) != "undefined") {
				connectionConfig.oDbg = oDbg;
			}
			var connection = new JSJaCHttpBindingConnection(connectionConfig);
			remote.connection = connection;
			// 安装（注册）Connection事件模型
			remote.jsjac.chat.setupEvent(connection);
	
	    	// setup args for connect method
			if (loginForm) {
				//connectionConfig = new Object();
				//connectionConfig.domain = loginForm.domain.value;
				connectionConfig.username = loginForm.userName.value;
				connectionConfig.pass = loginForm.password.value;
				connectionConfig.register = loginForm.register.checked;
			}
			// 连接服务器
			connection.connect(connectionConfig);
			
			//remote.jsjac.chat.changeStatus("available", "online", 1, "chat");
		} catch (e) {
			remote.console.errorEL().html(e.toString());
		} finally {
			return false;
		}
	},
	// 改变用户状态
	changeStatus: function (type, status, priority, show) {
		type = type || "unavailable";
		status = status || "online";
		priority = priority || "1";
		show = show || "chat";
		var presence = new JSJaCPresence();
		presence.setType(type); // unavailable invisible
		if (remote.connection) {
			//remote.connection.send(presence);
		}
		
		//presence = new JSJaCPresence();
		presence.setStatus(status); // online
		presence.setPriority(priority); // 1
		presence.setShow(show); // chat
		if (remote.connection) {
			remote.connection.send(presence);
		}
	},
	
	// 为Connection注册事件
	setupEvent: function (con) {
		var remoteChat = remote.jsjac.chat;
	    con.registerHandler('message', remoteChat.handleMessage);
	    con.registerHandler('presence', remoteChat.handlePresence);
	    con.registerHandler('iq', remoteChat.handleIQ);
	    con.registerHandler('onconnect', remoteChat.handleConnected);
	    con.registerHandler('onerror', remoteChat.handleError);
	    con.registerHandler('status_changed', remoteChat.handleStatusChanged);
	    con.registerHandler('ondisconnect', remoteChat.handleDisconnected);
	
	    con.registerIQGet('query', NS_VERSION, remoteChat.handleIqVersion);
	    con.registerIQGet('query', NS_TIME, remoteChat.handleIqTime);
	},
	// 发送远程消息
	sendMessage: function (msg, to) {
		try {
			if (msg == "") {
				return false;
			}
			var user = "";
			if (to) {
				if (!~to.indexOf("@")) {
					user += "@" + remote.jsjac.domain;
					to += "/" + remote.jsjac.resource;
				} else if (~to.indexOf("/")) {
					user = to.substr(0, to.indexOf("/"));
				}
			} else {
				// 向chat接收信息区域写消息
				if (remote.jsjac.chat.writeReceiveMessage) {
					var html = "你没有指定发送者的名称";
					alert(html);
					//remote.jsjac.chat.writeReceiveMessage(receiverId, "server", html, false);
				}
				return false;
			}
			var userJID = "u" + hex_md5(user);
			$("#" + userJID).find(remote.receiver).val(to);
			// 构建jsjac的message对象
			var message = new JSJaCMessage();
			message.setTo(new JSJaCJID(to));
			message.setType("chat"); // 单独聊天，默认为广播模式
			message.setBody(msg);
			// 发送消息
			remote.connection.send(message);
			return false;
		} catch (e) {
			var html = "<div class='msg error''>Error: " + e.message + "</div>";
			remote.console.info(html);
			return false;
		}
	},
	// 退出、断开链接
	logout: function () {
		var presence = new JSJaCPresence();
		presence.setType("unavailable");
		if (remote.connection) {
			remote.connection.send(presence);
			remote.connection.disconnect();
		}
	},
	errorHandler: function (event) {
		var e = event || window.event;
		remote.console.errorEL().html(e);
		if (remote.connection && remote.connection.connected()) {
			remote.connection.disconnect();
		}
		return false;
	},
	unloadHandler: function () {
		var con = remote.connection;
		if (typeof con != "undefined" && con && con.connected()) {
	  		// save backend type
			if (con._hold) { // must be binding
				(new JSJaCCookie("btype", "binding")).write();
			} 
			if (con.suspend) {
				con.suspend();
			}
		}
	},
	writeMessage: function (userJID, userName, content) {
		// 向chat接收信息区域写消息
		if (remote.jsjac.chat.writeReceiveMessage && !!content) {
			remote.jsjac.chat.writeReceiveMessage(userJID, userName, content, false);
		}
	},
	// 重新连接服务器
	reconnection: function () {
		remote.jsjac.register = false;
		if (remote.connection.connected()) {
			remote.connection.disconnect();
		}
		remote.jsjac.chat.login();
	},
	/* ########################### Handler Event ############################# */
	
	handleIQ: function (aIQ) {
		var html = "<div class='msg'>IN (raw): " + aIQ.xml().htmlEnc() + "</div>";
		remote.console.info(html);
		remote.connection.send(aIQ.errorReply(ERR_FEATURE_NOT_IMPLEMENTED));
	},
	handleMessage: function (aJSJaCPacket) {
		var user = aJSJaCPacket.getFromJID().toString();
		//var userName = user.split("@")[0];
		//var userJID = "u" + hex_md5(user);
		var content = aJSJaCPacket.getBody();
		var html = "";
		html += "<div class=\"msg\"><b>消息来自 " + user + ":</b><br/>";
		html += content.htmlEnc() + "</div>";
		remote.console.info(html);
		
		$.WebIM.messageHandler(user, content);
	},
	handlePresence: function (aJSJaCPacket) {
		var user = aJSJaCPacket.getFromJID();
		var userName = user.toString().split("@")[0];
		var html = "<div class=\"msg\">";
		if (!aJSJaCPacket.getType() && !aJSJaCPacket.getShow()) {
			html += "<b>" + userName + " 上线了.</b>";
		} else {
			html += "<b>" + userName + " 设置 presence 为： ";
			if (aJSJaCPacket.getType()) {
				html += aJSJaCPacket.getType() + ".</b>";
			} else {
				html += aJSJaCPacket.getShow() + ".</b>";
			}
			if (aJSJaCPacket.getStatus()) {
				html += " (" + aJSJaCPacket.getStatus().htmlEnc() + ")";
			}
		}
		html += "</div>";
		remote.console.info(html);
		
		// 向chat接收信息区域写消息
		remote.jsjac.chat.writeMessage("", userName, html);
	},
	handleError: function (event) {
		var e = event || window.event;
		var html = "An error occured:<br />" 
			+ ("Code: " + e.getAttribute("code") 
			+ "\nType: " + e.getAttribute("type") 
			+ "\nCondition: " + e.firstChild.nodeName).htmlEnc();
		remote.error(html);
		
		var content = "";
		switch (e.getAttribute("code")) {
			case "401":
				content = "登陆验证失败！";
				break;
			// 当注册发现重复，表明该用户已经注册，那么直接进行登陆操作			
			case "409":
				//content = "注册失败！\n\n请换一个用户名！";
				remote.jsjac.chat.reconnection();
				break;
			case "503":
				content = "无法连接到IM服务器，请检查相关配置！";
				break;
			case "500":
				var contents = "服务器内部错误！\n\n连接断开！<br/><a href='javascript: self.parent.remote.jsjac.chat.reconnection();'>重新连接</a>";
				remote.jsjac.chat.writeMessage("", "系统", contents);
				break;
			default:
				break;
		}
		if (content) {
			alert("WeIM: " + content);
		}
		if (remote.connection.connected()) {
			remote.connection.disconnect();
		}
	},
	// 状态变化触发事件
	handleStatusChanged: function (status) {
		remote.console.info("<div>当前用户状态: " + status + "</div>");
		remote.dbger.log("当前用户状态: " + status);
		if (status == "disconnecting") {
			var html = "<b style='color:red;'>你离线了！</b>";
			// 向chat接收信息区域写消息
			remote.jsjac.chat.writeMessage("", "系统", html);
		}
	},
	// 建立链接触发事件方法
	handleConnected: function () {
		remote.console.clear("debug"); // reset
		remote.connection.send(new JSJaCPresence());
	},
	// 断开链接触发事件方法
	handleDisconnected: function () {
		
	},
	handleIqVersion: function (iq) {
		remote.connection.send(iq.reply([
			iq.buildNode("name", remote.jsjac.resource), 
			iq.buildNode("version", JSJaC.Version), 
			iq.buildNode("os", navigator.userAgent)
		]));
		return true;
	},
	handleIqTime: function (iq) {
		var now = new Date();
		remote.connection.send(iq.reply([
			iq.buildNode("display", now.toLocaleString()), 
			iq.buildNode("utc", now.jabberDate()), 
			iq.buildNode("tz", now.toLocaleString().substring(now.toLocaleString().lastIndexOf(" ") + 1))
		]));
		return true;
	}
};

这个文件的代码就是用jsjac库和openfire建立通信的核心代码，代码中已经有注释，这里我就不再赘述。如果有什么不懂的可以给我留言。

4、消息区域、编辑器代码 send.message.editor-1.0.js

/**
 * IM chat Send Message iframe editor
 * @author: hoojo
 * @email: [email protected]
 * @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);
		}
	}
};

5、css样式 chat-2.0.css

/**
 * function: im web chat css
 * author: hoojo
 * createDate: 2012-5-26 上午11:42:10
 */
@CHARSET "UTF-8";

*, body {
	font-family: Courier,serif,monospace;
	font-size: 12px;
	padding: 0;
	margin: 0;	
}

.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;
}

.chat-message {
	position: absolute; 
	bottom: 0; 
	left: 0; 
	width: 100%; 
	height: 25px; 
	background-color: #fcfcfc;
}

.no-msg, .have-msg {
	cursor: pointer; 
	float: right; 
	margin: 5px 5px 0 0;
}

6、web.xml配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
	<servlet>
		<servlet-name>Jabber HTTP Binding Servlet</servlet-name>
		<servlet-class>org.jabber.JabberHTTPBind.JHBServlet</servlet-class>
		<!-- 
		<init-param>
			<param-name>debug</param-name>
			<param-value>1</param-value>
		</init-param>
		 -->
	</servlet>

	<servlet-mapping>
		<servlet-name>Jabber HTTP Binding Servlet</servlet-name>
		<url-pattern>/JHB/</url-pattern>
	</servlet-mapping>

	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>
</web-app>

至此，这个应用的全部代码已经贴出来，如果你按照我这边的结构形式应该是可以完成这个聊天应用的。如果你有什么问题或想法，欢迎你给我留言或评论！

你可能感兴趣的:([置顶] JavaScript/jQuery、HTML、CSS 构建 Web IM 远程及时聊天通信程序)

【iOS】MVC设计模式 Magnetic_h ios mvc 设计模式 objective-c 学习 ui
MVC前言如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architecturalpattern），属于编程的方法论。MVC模式就是架构模式的一种。它是Apple官方推荐的App开发架构，也是一般开发者最先遇到、最经典的架构。MVC各层controller层Controller/ViewController/VC（控制器）负责协调Model和View，处理大部分逻辑它将数据从Mod
理解Gunicorn：Python WSGI服务器的基石范范0825 ipython linux 运维
理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
Cell Insight | 单细胞测序技术又一新发现，可用于HIV-1和Mtb共感染个体诊断尐尐呅
结核病是艾滋病合并其他疾病中导致患者死亡的主要原因。其中结核病由结核分枝杆菌（Mycobacteriumtuberculosis,Mtb）感染引起，获得性免疫缺陷综合症（艾滋病）由人免疫缺陷病毒（Humanimmunodeficiencyvirustype1,HIV-1）感染引起。国家感染性疾病临床医学研究中心/深圳市第三人民医院张国良团队携手深圳华大生命科学研究院吴靓团队，共同研究得出单细胞测序
Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
LocalDateTime 转 String igotyback java 开发语言
importjava.time.LocalDateTime;importjava.time.format.DateTimeFormatter;publicclassMain{publicstaticvoidmain(String[]args){//获取当前时间LocalDateTimenow=LocalDateTime.now();//定义日期格式化器DateTimeFormatterformat
swagger访问路径 igotyback swagger
Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
mysql禁用远程登录 igotyback mysql
去mysql库中的user表里，将host都改成localhost之后刷新权限FLUSHPRIVILEGES;
Linux下QT开发的动态库界面弹出操作（SDL2） 13jjyao QT类 qt 开发语言 sdl2 linux
需求：操作系统为linux，开发框架为qt，做成需带界面的qt动态库，调用方为java等非qt程序难点：调用方为java等非qt程序，也就是说调用方肯定不带QApplication::exec()，缺少了这个，QTimer等事件和QT创建的窗口将不能弹出(包括opencv也是不能弹出)；这与qt调用本身qt库是有本质的区别的思路：1.调用方缺QApplication::exec()，那么我们在接口
店群合一模式下的社区团购新发展——结合链动 2+1 模式、AI 智能名片与 S2B2C 商城小程序源码说私域人工智能小程序
摘要：本文探讨了店群合一的社区团购平台在当今商业环境中的重要性和优势。通过分析店群合一模式如何将互联网社群与线下终端紧密结合，阐述了链动2+1模式、AI智能名片和S2B2C商城小程序源码在这一模式中的应用价值。这些创新元素的结合为社区团购带来了新的机遇，提升了用户信任感、拓展了营销渠道，并实现了线上线下的完美融合。一、引言随着互联网技术的不断发展，社区团购作为一种新兴的商业模式，在满足消费者日常需
html 中如何使用 uniapp 的部分方法某公司摸鱼前端 html uni-app 前端
示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
每日一题——第八十九题互联网打工人no1 C语言程序设计每日一练 c语言
题目：在字符串中找到提取数字，并统计一共找到多少整数，a123xxyu23&8889，那么找到的整数为123，23，8889//思想：#include#include#includeintmain(){charstr[]="a123xxyu23&8889";intcount=0;intnum=0;//用于临时存放当前正在构建的整数。boolinNum=false;//用于标记当前是否正在读取一个整
git常用命令笔记咩酱-小羊 git 笔记
###用习惯了idea总是不记得git的一些常见命令，需要用到的时候总是担心旁边站了人~~~记个笔记@_@，告诉自己看笔记不丢人初始化初始化一个新的Git仓库gitinit配置配置用户信息gitconfig--globaluser.name"YourName"gitconfig--globaluser.email"[email protected]"基本操作克隆远程仓库gitclone查看
腾讯云技术深度探索：构建高效云原生微服务架构我的运维人生云原生架构腾讯云运维开发技术共享
腾讯云技术深度探索：构建高效云原生微服务架构在当今快速发展的技术环境中，云原生技术已成为企业数字化转型的关键驱动力。腾讯云作为行业领先的云服务提供商，不断推出创新的产品和技术，助力企业构建高效、可扩展的云原生微服务架构。本文将深入探讨腾讯云在微服务领域的最新进展，并通过一个实际案例展示如何在腾讯云平台上构建云原生应用。腾讯云微服务架构概览腾讯云微服务架构基于云原生理念，旨在帮助企业快速实现应用的容
Pyecharts数据可视化大屏：打造沉浸式数据分析体验我的运维人生信息可视化数据分析数据挖掘运维开发技术共享
Pyecharts数据可视化大屏：打造沉浸式数据分析体验在当今这个数据驱动的时代，如何将海量数据以直观、生动的方式展现出来，成为了数据分析师和企业决策者关注的焦点。Pyecharts，作为一款基于Python的开源数据可视化库，凭借其丰富的图表类型、灵活的配置选项以及高度的定制化能力，成为了构建数据可视化大屏的理想选择。本文将深入探讨如何利用Pyecharts打造数据可视化大屏，并通过实际代码案例
Google earth studio 简介陟彼高冈yu 旅游
GoogleEarthStudio是一个基于Web的动画工具，专为创作使用GoogleEarth数据的动画和视频而设计。它利用了GoogleEarth强大的三维地图和卫星影像数据库，使用户能够轻松地创建逼真的地球动画、航拍视频和动态地图可视化。网址为https://www.google.com/earth/studio/。GoogleEarthStudio是一个基于Web的动画工具，专为创作使用G
python os.environ_python os.environ 读取和设置环境变量 weixin_39605414 python os.environ
>>>importos>>>os.environ.keys()['LC_NUMERIC','GOPATH','GOROOT','GOBIN','LESSOPEN','SSH_CLIENT','LOGNAME','USER','HOME','LC_PAPER','PATH','DISPLAY','LANG','TERM','SHELL','J2REDIR','LC_MONETARY','QT_QPA
PHP环境搭建详细教程好看资源平台前端 php
PHP是一个流行的服务器端脚本语言，广泛用于Web开发。为了使PHP能够在本地或服务器上运行，我们需要搭建一个合适的PHP环境。本教程将结合最新资料，介绍在不同操作系统上搭建PHP开发环境的多种方法，包括Windows、macOS和Linux系统的安装步骤，以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类：集成开发环境：例如XAMPP、WAMP、MAMP，这
509. 斐波那契数(每日一题) lzyprime
lzyprime博客(github)创建时间：2021.01.04qq及邮箱：2383518170leetcode笔记题目描述斐波那契数，通常用F(n)表示，形成的序列称为斐波那契数列。该数列由0和1开始，后面的每一项数字都是前面两项数字的和。也就是：F(0)=0，F(1)=1F(n)=F(n-1)+F(n-2)，其中n>1给你n，请计算F(n)。示例1：输入：2输出：1解释：F(2)=F(1)+
使用 FinalShell 进行远程连接（ssh 远程连接 Linux 服务器）编程经验分享开发工具服务器 ssh linux
目录前言基本使用教程新建远程连接连接主机自定义命令路由追踪前言后端开发，必然需要和服务器打交道，部署应用，排查问题，查看运行日志等等。一般服务器都是集中部署在机房中，也有一些直接是云服务器，总而言之，程序员不可能直接和服务器直接操作，一般都是通过ssh连接来登录服务器。刚接触远程连接时，使用的是XSHELL来远程连接服务器，连接上就能够操作远程服务器了，但是仅用XSHELL并没有上传下载文件的功能
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
Git常用命令－修改远程仓库地址猿大师 Linux Java git java
查看远程仓库地址gitremote-v返回结果originhttps://git.coding.net/＊＊＊＊＊.git(fetch)originhttps://git.coding.net/＊＊＊＊＊.git(push)修改远程仓库地址gitremoteset-urloriginhttps://git.coding.net/＊＊＊＊＊.git先删除后增加远程仓库地址gitremotermori
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
使用Faiss进行高效相似度搜索 llzwxh888 faiss python
在现代AI应用中，快速和高效的相似度搜索是至关重要的。Faiss（FacebookAISimilaritySearch）是一个专门用于快速相似度搜索和聚类的库，特别适用于高维向量。本文将介绍如何使用Faiss来进行相似度搜索，并结合Python代码演示其基本用法。什么是Faiss？Faiss是一个由FacebookAIResearch团队开发的开源库，主要用于高维向量的相似性搜索和聚类。Faiss
使用Apify加载Twitter消息以进行微调的完整指南 nseejrukjhad twitter easyui 前端 python
#使用Apify加载Twitter消息以进行微调的完整指南##引言在自然语言处理领域，微调模型以适应特定任务是提升模型性能的常见方法。本文将介绍如何使用Apify从Twitter导出聊天信息，以便进一步进行微调。##主要内容###使用Apify导出推文首先，我们需要从Twitter导出推文。Apify可以帮助我们做到这一点。通过Apify的强大功能，我们可以批量抓取和导出数据，适用于各类应用场景。
利用Requests Toolkit轻松完成HTTP请求 nseejrukjhad http 网络协议网络 python
RequestsToolkit的力量：轻松构建HTTP请求Agent在现代软件开发中，API请求是与外部服务交互的核心。RequestsToolkit提供了一种便捷的方式，帮助开发者构建自动化的HTTP请求Agent。本文旨在详细介绍RequestsToolkit的设置、使用和潜在挑战。引言RequestsToolkit是一个强大的工具包，可用于构建执行HTTP请求的智能代理。这对于想要自动化与外
利用LangChain的StackExchange组件实现智能问答系统 nseejrukjhad langchain microsoft 数据库 python
利用LangChain的StackExchange组件实现智能问答系统引言在当今的软件开发世界中，StackOverflow已经成为程序员解决问题的首选平台之一。而LangChain作为一个强大的AI应用开发框架，提供了StackExchange组件，使我们能够轻松地将StackOverflow的海量知识库集成到我们的应用中。本文将详细介绍如何使用LangChain的StackExchange组件
如何部分格式化提示模板:LangChain中的高级技巧 nseejrukjhad langchain java 服务器 python
标题:如何部分格式化提示模板:LangChain中的高级技巧内容:如何部分格式化提示模板:LangChain中的高级技巧引言在使用大型语言模型(LLM)时,提示工程是一个关键环节。LangChain提供了强大的提示模板功能,让我们能更灵活地构建和管理提示。本文将介绍LangChain中一个高级特性-部分格式化提示模板,这个技巧可以让你的提示管理更加高效和灵活。什么是部分格式化提示模板?部分格式化提
在一台Ubuntu计算机上构建Hyperledger Fabric网络落叶无声9 区块链超级账本 Hyperledger fabric 区块链 ubuntu 构建 hyperledger fabric
在一台Ubuntu计算机上构建HyperledgerFabric网络Hyperledgerfabric是一个开源的区块链应用程序平台，为开发基于区块链的应用程序提供了一个起点。当我们提到HyperledgerFabric网络时，我们指的是使用HyperledgerFabric的正在运行的系统。即使只使用最少数量的组件，部署Fabric网络也不是一件容易的事。Fabric社区创建了一个名为Cello
GitHub上克隆项目 bigbig猩猩 github
从GitHub上克隆项目是一个简单且直接的过程，它允许你将远程仓库中的项目复制到你的本地计算机上，以便进行进一步的开发、测试或学习。以下是一个详细的步骤指南，帮助你从GitHub上克隆项目。一、准备工作1.安装Git在克隆GitHub项目之前，你需要在你的计算机上安装Git工具。Git是一个开源的分布式版本控制系统，用于跟踪和管理代码变更。你可以从Git的官方网站（https://git-scm.
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
LeetCode[Math] - #66 Plus One Cwind java LeetCode 题解 Algorithm Math
原题链接：#66 Plus One 要求：给定一个用数字数组表示的非负整数，如num1 = {1, 2, 3, 9}, num2 = {9, 9}等，给这个数加上1。注意： 1. 数字的较高位存在数组的头上，即num1表示数字1239 2. 每一位（数组中的每个元素）的取值范围为0~9 难度：简单分析：题目比较简单，只须从数组
JQuery中$.ajax()方法参数详解 AILIKES JavaScript jsonp jquery Ajax json
url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和 delete也可以使用，但仅部分浏览器支持。 timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局
JConsole & JVisualVM远程监视Webphere服务器JVM Kai_Ge JVisualVM JConsole Webphere
JConsole是JDK里自带的一个工具，可以监测Java程序运行时所有对象的申请、释放等动作，将内存管理的所有信息进行统计、分析、可视化。我们可以根据这些信息判断程序是否有内存泄漏问题。　　使用JConsole工具来分析WAS的JVM问题，需要进行相关的配置。　　首先我们看WAS服务器端的配置. 　　1、登录was控制台https://10.4.119.18
自定义annotation 120153216 annotation
Java annotation 自定义注释@interface的用法一、什么是注释说起注释，得先提一提什么是元数据(metadata)。所谓元数据就是数据的数据。也就是说，元数据是描述数据的。就象数据表中的字段一样，每个字段描述了这个字段下的数据的含义。而J2SE5.0中提供的注释就是java源代码的元数据，也就是说注释是描述java源
CentOS 5/6.X 使用 EPEL YUM源 2002wmj centos
CentOS 6.X 安装使用EPEL YUM源1. 查看操作系统版本[root@node1 ~]# uname -a Linux node1.test.com 2.6.32-358.el6.x86_64 #1 SMP Fri Feb 22 00:31:26 UTC 2013 x86_64 x86_64 x86_64 GNU/Linux [root@node1 ~]#
在SQLSERVER中查找缺失和无用的索引SQL 357029540 SQL Server
--缺失的索引 SELECT avg_total_user_cost * avg_user_impact * ( user_scans + user_seeks ) AS PossibleImprovement , last_user_seek ,
Spring3 MVC 笔记（二） —json+rest优化 7454103 Spring3 MVC
接上次的 spring mvc 注解的一些详细信息！其实也是一些个人的学习笔记呵呵！
替换“\”的时候报错Unexpected internal error near index 1 \ ^ adminjun java “\替换”
发现还是有些东西没有刻子脑子里,,过段时间就没什么概念了,所以贴出来...以免再忘... 在拆分字符串时遇到通过 \ 来拆分，可是用所以想通过转义 \\ 来拆分的时候会报异常 public class Main { /*
POJ 1035 Spell checker(哈希表) aijuans 暴力求解--哈希表
/* 题意：输入字典，然后输入单词，判断字典中是否出现过该单词，或者是否进行删除、添加、替换操作，如果是，则输出对应的字典中的单词要求按照输入时候的排名输出题解：建立两个哈希表。一个存储字典和输入字典中单词的排名，一个进行最后输出的判重 */ #include <iostream> //#define using namespace std; const int HASH =
通过原型实现javascript Array的去重、最大值和最小值 ayaoxinchao JavaScript array prototype
用原型函数（prototype）可以定义一些很方便的自定义函数，实现各种自定义功能。本次主要是实现了Array的去重、获取最大值和最小值。实现代码如下： <script type="text/javascript"> Array.prototype.unique = function() { var a = {}; var le
UIWebView实现https双向认证请求 bewithme UIWebView https Objective-C
什么是HTTPS双向认证我已在先前的博文 ASIHTTPRequest实现https双向认证请求中有讲述，不理解的读者可以先复习一下。本文是用UIWebView来实现对需要客户端证书验证的服务请求，网上有些文章中有涉及到此内容，但都只言片语，没有讲完全，更没有完整的代码，让人困扰不已。但是此知
NoSQL数据库之Redis数据库管理(Redis高级应用之事务处理、持久化操作、pub_sub、虚拟内存) bijian1013 redis 数据库 NoSQL
3.事务处理 Redis对事务的支持目前不比较简单。Redis只能保证一个client发起的事务中的命令可以连续的执行，而中间不会插入其他client的命令。当一个client在一个连接中发出multi命令时，这个连接会进入一个事务上下文，该连接后续的命令不会立即执行，而是先放到一个队列中，当执行exec命令时，redis会顺序的执行队列中
各数据库分页sql备忘 bingyingao oracle sql 分页
ORACLE 下面这个效率很低 SELECT * FROM ( SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_FS_RETURN order by id desc) A ) WHERE RN <20; 下面这个效率很高 SELECT A.*, ROWNUM RN FROM (SELECT * FROM IPAY_RCD_
【Scala七】Scala核心一：函数 bit1129 scala
1. 如果函数体只有一行代码，则可以不用写{},比如 def print(x: Int) = println(x) 一行上的多条语句用分号隔开，则只有第一句属于方法体，例如 def printWithValue(x: Int) : String= println(x); "ABC" 上面的代码报错，因为，printWithValue的方法
了解GHC的factorial编译过程 bookjovi haskell
GHC相对其他主流语言的编译器或解释器还是比较复杂的，一部分原因是haskell本身的设计就不易于实现compiler，如lazy特性，static typed，类型推导等。关于GHC的内部实现有篇文章说的挺好，这里，文中在RTS一节中详细说了haskell的concurrent实现，里面提到了green thread，如果熟悉Go语言的话就会发现，ghc的concurrent实现和Go有点类
Java-Collections Framework学习与总结-LinkedHashMap BrokenDreams LinkedHashMap
前面总结了java.util.HashMap，了解了其内部由散列表实现，每个桶内是一个单向链表。那有没有双向链表的实现呢？双向链表的实现会具备什么特性呢？来看一下HashMap的一个子类——java.util.LinkedHashMap。
读《研磨设计模式》-代码笔记-抽象工厂模式-Abstract Factory bylijinnan abstract
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * Abstract Factory Pattern * 抽象工厂模式的目的是： * 通过在抽象工厂里面定义一组产品接口，方便地切换“产品簇” * 这些接口是相关或者相依赖的
压暗面部高光 cherishLC PS
方法一、压暗高光&重新着色当皮肤很油又使用闪光灯时，很容易在面部形成高光区域。下面讲一下我今天处理高光区域的心得：皮肤可以分为纹理和色彩两个属性。其中纹理主要由亮度通道（Lab模式的L通道）决定，色彩则由a、b通道确定。处理思路为在保持高光区域纹理的情况下，对高光区域着色。具体步骤为：降低高光区域的整体的亮度，再进行着色。如果想简化步骤，可以只进行着色（参看下面的步骤1
Java VisualVM监控远程JVM crabdave visualvm
Java VisualVM监控远程JVM JDK1.6开始自带的VisualVM就是不错的监控工具. 这个工具就在JAVA_HOME\bin\目录下的jvisualvm.exe, 双击这个文件就能看到界面通过JMX连接远程机器, 需要经过下面的配置: 1. 修改远程机器JDK配置文件 (我这里远程机器是linux).
Saiku去掉登录模块 daizj saiku 登录 olap BI
1、修改applicationContext-saiku-webapp.xml <security:intercept-url pattern="/rest/**" access="IS_AUTHENTICATED_ANONYMOUSLY" /> <security:intercept-url pattern=&qu
浅析 Flex中的Focus dsjt html Flex Flash
关键字：focus、 setFocus、 IFocusManager、KeyboardEvent 焦点、设置焦点、获得焦点、键盘事件一、无焦点的困扰——组件监听不到键盘事件原因：只有获得焦点的组件（确切说是InteractiveObject）才能监听到键盘事件的目标阶段；键盘事件（flash.events.KeyboardEvent）参与冒泡阶段，所以焦点组件的父项（以及它爸
Yii全局函数使用 dcj3sjt126com yii
由于YII致力于完美的整合第三方库，它并没有定义任何全局函数。yii中的每一个应用都需要全类别和对象范围。例如，Yii::app()->user;Yii::app()->params['name'];等等。我们可以自行设定全局函数，使得代码看起来更加简洁易用。(原文地址) 我们可以保存在globals.php在protected目录下。然后，在入口脚本index.php的，我们包括在
设计模式之单例模式二（解决无序写入的问题） come_for_dream 单例模式 volatile 乱序执行双重检验锁
在上篇文章中我们使用了双重检验锁的方式避免懒汉式单例模式下由于多线程造成的实例被多次创建的问题，但是因为由于JVM为了使得处理器内部的运算单元能充分利用，处理器可能会对输入代码进行乱序执行（Out Of Order Execute）优化，处理器会在计算之后将乱序执行的结果进行重组，保证该
程序员从初级到高级的蜕变 gcq511120594 框架工作 PHP android html5
软件开发是一个奇怪的行业，市场远远供不应求。这是一个已经存在多年的问题，而且随着时间的流逝，愈演愈烈。我们严重缺乏能够满足需求的人才。这个行业相当年轻。大多数软件项目是失败的。几乎所有的项目都会超出预算。我们解决问题的最佳指导方针可以归结为——“用一些通用方法去解决问题，当然这些方法常常不管用，于是，唯一能做的就是不断地尝试，逐个看看是否奏效”。现在我们把淫浸代码时间超过3年的开发人员称为
Reverse Linked List hcx2013 list
Reverse a singly linked list. /** * Definition for singly-linked list. * public class ListNode { * int val; * ListNode next; * ListNode(int x) { val = x; } * } */ p
Spring4.1新特性——数据库集成测试 jinnianshilongnian spring 4.1
目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
C# Ajax上传图片同时生成微缩图(附Demo) liyonghui160com
1.Ajax无刷新上传图片,详情请阅我的这篇文章。（jquery + c# ashx） 2.C#位图处理 System.Drawing。 3.最新demo支持IE7,IE8,Fir
Java list三种遍历方法性能比较 pda158 java
从c/c++语言转向java开发，学习java语言list遍历的三种方法，顺便测试各种遍历方法的性能，测试方法为在ArrayList中插入1千万条记录，然后遍历ArrayList，发现了一个奇怪的现象，测试代码例如以下： package com.hisense.tiger.list; import java.util.ArrayList; import java.util.Iterator;
300个涵盖IT各方面的免费资源（上）——商业与市场篇 shoothao seo 商业与市场 IT资源免费资源
A.网站模板+logo+服务器主机+发票生成 HTML5 UP:响应式的HTML5和CSS3网站模板。 Bootswatch:免费的Bootstrap主题。 Templated:收集了845个免费的CSS和HTML5网站模板。 Wordpress.org|Wordpress.com:可免费创建你的新网站。 Strikingly:关注领域中免费无限的移动优
localStorage、sessionStorage uule localStorage
W3School 例子 HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不