Go语言视频零基础入门到精通

javalearner · 发表于 2014-10-13 01:50:52

网页聊天的基本原理很简单，在使用者发送信息给服务器端时，同时取回新的聊天信息，在使用者�有发送信息时，同时查询服务端是否有新的信息，�显示在页面中。

不过重点就在于取得信息或重新取得信息的方式，过去，是在让浏览器定时重新刷新网页，每一次除了新的信息之外，往往伴随着大量重复的HTML标记等�容。

如果使用非同步�求，取得XML回应信息，并动态更新页面中显示聊天信息的部分，这么一来，就可以节省掉下载重复页面�容的带宽，使用者的画面也会更稳定，不会因为重新整理而发生闪烁的感觉。

例如，您可以写一个简单的聊天页面： index.html




  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>聊天室</title>
<script type="text/javascript" src="ChatRoomEx-1.js"></script>
</head><body>
<p>输入信息：
<input id="text"/>
<input type="button" value="发送" onclick="sendMessage()"/>
</p>
<p>聊天室信息：</p>
<table align="left">
   <tbody id="dynamicUpdateArea"></tbody>
</table>
</body></html>
   您可以在这个网页中的文本框中输入文字，而下方会有个显示信息的区域，每次的新信息�只在该区域更新，页面中其余的部分不用变动，所以不用重复下载。

来看一下JavaScript的部分：ChatRoomEx-1.js

var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function sendMessage() {
var msg = document.getElementById("text").value;
// 使用者只是随意按下发送按钮，但文本框中�有文字
if(msg === "") {
// 那就重新整理信息区好了
refreshMessage();
return;
}
// 发送信息
var param = "task=send&msg=" + msg;
// ajax请求
ajaxRequest(param);
// 清空文本框
document.getElementById("text").value = "";
}
// 定时查询用这个
function queryMessage() {
var param = "task=query";
ajaxRequest(param);
}
function ajaxRequest(param) {
var url = "ChatRoomServlet?timeStamp=" + new Date().getTime();
createXMLHttpRequest();
xmlHttp.onreadystatechange = refreshMessage;
xmlHttp.open("POST", url);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
xmlHttp.send(param);
}
function refreshMessage() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
// 处理显示信息的表格区域
var table_body = document.getElementById("dynamicUpdateArea");
var length = table_body.childNodes.length;
var i;
for (i = 0; i < length; i++) {
// 先移除原有的列（row）
table_body.removeChild(table_body.childNodes[0]);
}
// 处理取回的信息
var messages = xmlHttp.responseXML.getElementsByTagName("message");
length = messages.length;
for(i = length - 1; i >= 0 ; i--) {
var message = messages[i].firstChild.data;
// 在表格中新增一列来排列信息
var row = createRow(message);
table_body.appendChild(row);
}
// 下次2秒后会再查询一下有无新信息
setTimeout(queryMessage, 2000);
}
}
}
function createRow(message) {
var row = document.createElement("tr");
var cell = document.createElement("td");
var cell_data = document.createTextNode(message);
cell.appendChild(cell_data);
row.appendChild(cell);
return row;
}
服务器端必须传回以下的XML格式，表示目前服务器端所管理的聊天室中可取得的信息：

复制代码

<messages>

<message>聊天信息一</message>

<message>聊天信息二</message>

<message>聊天信息三</message>

</messages>

以下是这个简单的聊天室的Servlet：ChatRoomServlet.java

package onlyfun.caterpillar;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.LinkedList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ChatRoomServlet extends javax.servlet.http.HttpServlet implements
javax.servlet.Servlet {
private static LinkedList
messages = new LinkedList
();
private List
addMessage(String text) {
if (text != null && text.trim().length() > 0) {
messages.addFirst(new Message(text));
while (messages.size() > 10) {
messages.removeLast();
}
}
return messages;
}
private List
getMessages() {
return messages;
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
List
list = null;
if("send".equals(request.getParameter("task"))) {
String msg = request.getParameter("msg");
// 中文处理
msg = new String(msg.getBytes("ISO-8859-1"), "UTF8");
list = addMessage(msg);
} else if("query".equals(request.getParameter("task"))){
list = getMessages();
}
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.setCharacterEncoding("UTF8");
PrintWriter out = response.getWriter();
out.println("< messages>");
for(int i = 0; i < list.size(); i++) {
String msg = list.get(i).getText();
out.println("< message>" + msg + "< /message>");
}
out.println(" ");
out.close();
}
}
Message.java
package onlyfun.caterpillar;
public class Message {
private String text;
public Message(String newtext) {
text = newtext;
if (text.length() > 256) {
text = text.substring(0, 256);
}
text = text.replace("<", "[");
text = text.replace("&", "_");
}
public String getText() {
return text;
}
}

复制代码

源码下载：http://file.javaxxz.com/2014/10/13/015052578.zip

		自动登录	找回密码
密码			立即注册

JAVA高级面试进阶视频教程	Java架构师系统进阶VIP课程	分布式高可用全栈开发微服务教程	Go语言视频零基础入门到精通	Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程	SpringBoot2.X入门到高级使用教程	大数据培训第六期全套视频教程	深度学习（CNN RNN GAN）算法原理	Java亿级流量电商系统视频教程
互联网架构师视频教程	年薪50万Spark2.0从入门到精通	年薪50万！人工智能学习路线教程	年薪50万！大数据从入门到精通学习路线	年薪50万！机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程	深度学习数据分析基础到实战	最新黑马javaEE2.1就业课程	从 0到JVM实战高手教程	MySQL入门到精通教程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

Java亿级流量电商系统视频教程

年薪50万Spark2.0从入门到精通

年薪50万！人工智能学习路线教程

[AJAX学习]简单的ajax聊天网页

相关帖子