![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>EventSource</title> </head> <body> <script> window.onload=function(){ name(); function name(){ var username=prompt("请输入您的昵称"); if(!username){ return false; } var xml=new XMLHttpRequest(); xml.open("POST","/addUser"); xml.send("name="+username); xml.onreadystatechange=function(){ if(xml.status=200&&xml.readyState==4){ var res=JSON.parse(xml.responseText) if(res.success=="ok"){ alert("欢迎你的加入"); window.hiddenValue.value=res.name; var es = new EventSource("/chat"); es.addEventListener("message", function(e){ var temp=document.createElement("li"); temp.innerHTML= e.data; window.message.scrollIntoView(); window.content.appendChild(temp); },false); }else{ alert(res.msg+",如果你还想加入,行刷新重新输入用户名称"); //本来用的递归,但是体验不好,就改了 //name(); } } } } var div=document.getElementsByTagName("div")[0] div.style.width=window.innerWidth+"px"; } function sendMessage(){ var message=window.message.value; if(message.trim()){ var b=new XMLHttpRequest(); b.open("POST","/chat"); b.send("message="+window.message.value+"&name="+ window.hiddenValue.value); } } </script> <div> <ul id="content"> </ul> </div> <input type="text" name="message" id="message" /><input type="button" value="发送" onclick="sendMessage()"/> <input type="hidden" id="hiddenValue"> </body> </html>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var server=require("http"); var url=require("url"); var file=require("fs"); var querystring=require("querystring"); var clientName=[]; var responseArray=[]; server.createServer(function (request, response) { var message=""; var name=""; var urlContent=url.parse(request.url); //首页 if(urlContent.pathname=="/"){ response.writeHead(200,{"Content-Type":"text/html;charset=utf-8"}); file.readFile("../views/Index.html",function(err,data){ response.end(data); }) return false; } else if(urlContent.pathname=="/chat"){ //发送消息 if(request.method=="POST"){ //并不能根据response得到正确的name索引,所以前台传递name request.on("data",function(data){ data= querystring.parse(data.toString()); message+=decodeURIComponent(data.message.trim()); name+=decodeURIComponent(data.name.trim()); }) request.on("end",function(){ responseArray.forEach(function(i){ i.write("data:"+name+"说:"+message+"\n\n"); }) }) response.end(); }else{ //建立长连接,保存相应 responseArray.push(response); response.writeHead(200,{"Content-Type":"text/event-stream"}); response.write("data:已连接至服务器\n\n"); request.connection.on("end",function(){ var index=responseArray.indexOf(response) clientName.splice(index,1); responseArray.splice(index,1); response.end(); }) } }else if(urlContent.pathname=="/addUser"){ //添加用户名 request.on("data",function(data){ data= querystring.parse(data.toString().trim()); name+=decodeURIComponent(data.name.trim()); }); request.on("end",function(){ response.writeHead(200,{"Content-Type":"text/json;charset=utf-8"}); if(clientName.some(function(i){ if(i==name) return true; })){ response.write("{\"success\":\"fail\",\"msg\":\"用户名重复\"}") }else{ response.write("{\"success\":\"ok\",\"name\":\""+name+"\"}"); responseArray.forEach(function(i){ i.write("data:欢迎"+name+"的加入"+"\n\n"); }) clientName.push(name); } response.end(); }) } else{ response.writeHead(404,{"Content-Type":"text/json"}); response.end(); } }).listen(8012);
后台使用Node.js 博主是一个新人,会有很多不太适合的代码,希望大家能多多帮助。代码中注意路径问题。代码仍有缺陷,现在连接断开,不一定能够删除用户名称。以下的总结都是基于上面的代码的,如果有其他情况,麻烦您给我说一下,谢谢。
可以跟服务器建立一个保持连接状态的连接,这样服务器能在服务端来对客户端推送信息。服务端在推送的时候要注意格式。write的内容必须是data:内容的,当write中的内容 有一个空行的时候就会推送消息,推送后,会触发EventSource的message事件,事件对象的data属性为推送的消息内容。
当write的时候发现客户端不再保持连接的时候,就会断开连接,如果还在write,就会触发write after end错误。只有服务端第一次wirte的时候才算连接成功,第一次write即使没有空格不进行推送,客户端也会得到200的状态,正式建立连接。如果服务端没有进行及时的write,则客户端认为还在请求过程中,等待服务端响应,会有一个等待时间,在等待的时间内write会正确的建立200链接。如果超过等待时间还是没有write,则请求将会失败,将重新发起请求。如果服务端明确发回404,并且response结束,则不会再次发出请求,否则,长连接请求会一直等待正式建立连接,并过时,再请求。
第一个长连接请求在进行请求的时候,一直没有建立正式的连接,超时后,会再次发送一个连接,在Chrome中观看的话,同一个network发了两次请求,但是这两次请求的是不同的请求
open事件为服务器连接打开的时候触发
error当发生错误的时候出发
如果服务器一直不触发messag事件,则过了一段时间后,不管还以前的连接是否还在,都会重新发起一个请求。服务器与客户端针对一个EventSource的request和response只存在一个,用前面的response.write的时候,将不会推送到客户端(此response已经被客户端放弃),如果连接建立后,服务器停掉了,则客户端会一直发送长连接请求。当在客户端使用eventsource的close或者关闭网页的时候,触发自己和服务器对应的request.connection的end事件。