什么是ServerPush,服务器向客户端“推送“,其实就是”长连接“
只有浏览器请求服务器端,服务器端才给浏览器响应数据,不会主动向浏览器推送数据,这是一种安全考虑,也是提高服务器的性能考虑,如果服务器向浏览器主动推送数据,就要用到ServerPush等技术模拟实现。
举个例子:
通过两个页面互相发送消息实现,消息放到数据库。
/// <summary> /// ServerPush1 的摘要说明 /// </summary> public class ServerPush1 : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "application/json"; string action = context.Request["action"]; if (action == "send")//发送 { string me = context.Request["me"]; string toUserName = context.Request["toUserName"]; string msg = context.Request["msg"]; SQLHpler.ExecuteNonQuery("INSERT INTO T_Msgs(FromUserName,ToUserName,Msg) VALUES(@FromUserName,@ToUserName,@Msg)", new SqlParameter("@FromUserName", me), new SqlParameter("@ToUserName", toUserName), new SqlParameter("@Msg", msg)); context.Response.Write(new JavaScriptSerializer().Serialize(new { Status = "ok" })); } else if (action == "receive") //登陆,并持续查询、接收对方发过来的数据 { //做一个简单的例子,以ServerPush1.ashx?me=sean //请把发给sean的消息发给我一条 string me = context.Request["me"]; while (true) { DataTable dt = SQLHpler.ExecuteQuery("SELECT TOP 1 * FROM T_Msgs WHERE ToUserName=@ToUserName",new SqlParameter("@ToUserName", me)); if (dt.Rows.Count <= 0) { Thread.Sleep(500);//没找到,休息500ms再查询,这样避免对数据库的查询压力,和占用WEB服务器CPU资源 continue;//下一次while } else { DataRow row = dt.Rows[0]; long id = (long)row["Id"]; string fromUserName = (string)row["FromUserName"]; string msg = (string)row["Msg"]; //查询完之后要删除消息,否则会出现死循环,不停的给页面输出同一个消息 SQLHpler.ExecuteNonQuery("DELETE FROM T_Msgs WHERE Id=@Id",new SqlParameter("@Id",id)); //创建一个匿名对象,将查询到的数据存到里面 var data = new { FromUserName = fromUserName, Msg = msg, Id = id }; string json = new JavaScriptSerializer().Serialize(data);//将匿名对象转换为json context.Response.Write(json);//将请求结果以json格式返回 break; } } } else { throw new Exception("action错误"); } }
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript" src="https://www.jb51.net/jquery-1.8.3.min.js"></script> <script type="text/javascript"> var rev = function () { var mine = $('#me').val(); $.ajax({ type: 'post', url: 'serverPush1.ashx', data: { action: 'receive', me: mine },//传给serverPush.ashx根据me查找发给me的消息 success: function (data) { $('#ulMsg').append($('<li>' + data.FromUserName + '对我说:' + data.Msg + '</li>')); rev();//收到消息后再向服务器请求数据,再给我一条消息 }, error: function () { rev(); //哪怕网络请求失败(比如用户网络故障),也再次发送请求 } }); }; $(function () { //发送 $('#btnSend').click(function () { var myName = $('#me').val(); var toUserName = $('#toUserName').val(); var msg = $('#msgContext').val(); $.ajax({ type: 'post', url: 'serverPush1.ashx', data: { action: 'send', me: myName, toUserName: toUserName, msg: msg },//根据用户输入的信息,传到服务端ServerPush.ashx进行插入操作 success: function (data) { if (data.Status == 'ok') {//如果发送成功, $('#ulMsg').append($('<li>我对' + toUserName + '说:' + msg + '</li>')); $('#msgContext').val(''); } else { alert('发送出错,返回报文无法识别'); } }, error: function () { alert('发送出错'); } }); }); //登陆,接收数据 $('#btnLogin').click(function () { rev(); $(this).attr("disabled", "disabled"); }); /* $('#btnLogin').click(function () {//接收 var mine = $('#me').val(); $.ajax({ type: 'post', url: 'serverPush1.ashx', data: { action: 'receive', me: mine }, //传给serverPush.ashx根据me查找发给me的消息 success: function (data) { $('#ulMsg').append($('<li>' + data.toUserName + '对我说:' + data.msg + '</li>')); }, error: function () { alert('接收失败'); } }); });*/ }); </script> </head> <body> 发送人:<input type="text" /><input type="button" value="登陆"/><br /> 接收人:<input type="text" /><br /> 输入消息:<input type="text" /><input type="button" value="发送" /><br /> 聊天记录:<br /> <ul> </ul> </body> </html>