html5 eventsource,基于HTML5 EventSource /Websocket 的聊天室示范

HTML5EventSource/Websocket NODEJS服务器 1,2,3为一个范例 4,5为一个范例 无 scriptwindow.οnlοad=function(){var nick = prompt("enter your name");var input = document.getElementById('input');var bt = document.getElementById('bt');var chat=new

HTML5 EventSource /Websocket

NODEJS 服务器

1,2,3 为 一个范例

4,5为一个范例

window.οnlοad=function(){

var nick = prompt("enter your name");

var input = document.getElementById('input');

var bt = document.getElementById('bt');

var chat=new window.EventSource("/chat");

chat.onmessage =function(e){

var msg= e.data;

var node = document.createTextNode(msg);

var div = document.createElement("div");

div.appendChild(node);

document.body.insertBefore(div,input);

input.scrollIntoView();

}

bt.onclick = function(){

var msg = nick +": "+input.value;

var xhr= new XMLHttpRequest();

xhr.open("POST",'/chat');

xhr.setRequestHeader("Content-type",'text/plain;charset=utf8');

xhr.send(msg);

input.value=""

}

};

function test(json){console.log("content:\n"+json);}

var http=require("http");

var clientui = require('fs').readFileSync('chatclient.html');

var jsf = require('fs').readFileSync('jsonp.js');

// var emulation = require('fs').readFileSync('EventSourceEmulation.js');

var clients=[];

setInterval(function(){

clients.forEach(function(client){

client.write(":ping?n");

})

},20000);

var server = new http.Server();

server.on("request",function (request, response) {

var url = require('url').parse(request.url)

console.log(request.method+" "+url.path);

if(url.path==='/'){

console.log("get client");

response.writeHead(200,{'Content-Type':"text/html"})

// response.write("");

response.write(clientui);

response.end();

return;

}else if(url.path!=='/chat'){

if(url.pathname==='/jsonp.js'){

console.log("callback:"+url.query);

response.writeHead(200,{'Content-Type':"text/jsonp"})

response.write( jsf );

response.write(url.query.split("=")[1]+"(jsonp);");

response.end();

return;

}else{

console.log("error path");

response.writeHead(404);

response.end();

return;

}

}

if (request.method==='POST'){

console.log("POST req received");

request.setEncoding('utf8');

var body='';

request.on("data",function(data){

console.log("data "+data);

body+=data;

});

request.on("end",function(){

response.writeHead(200);

response.end();

var message = 'data: '+body.replace('\n','\ndata: ')+"\n\r\n\r";

clients.forEach(function(client){client.write(message)});

});

}else{

console.log("GET req received");

response.writeHead(200,{'Content-Type':"text/event-stream"});

response.write('data: Connected\n\n');

request.connection.on('end',function(){

clients.splice(clients.indexOf(response),1);

response.end();

});

clients.push(response);

}

});

server.listen(8000);

var jsonp="hello"

alert("hhee");

var http=require("http");

var ws=require("websocket-server");

var clientui = require('fs').readFileSync('chatclient.html');

var httpserver = new http.Server();

httpserver.on("request",function (request, response) {

if(request.url==='/'){

response.writeHead(200,{'Content-Type':'text/html'});

response.write(clientui);

response.end();

}else{

response.write(404);

response.end();

}

});

var wsserver= ws.createServer({server:httpserver});

wsserver.on('connection',function(socket){

socket.send("Welcome to chat room");

socket.on('message',function(msg){

wsserver.broadcast(msg);

});

}

);

wsserver.listen(8000)

window.οnlοad=function(){

var nick = prompt("enter your name");

var input = document.getElementById('input');

var bt = document.getElementById('bt');

var socket= new WebSocket("ws://"+location.host+"/");

socket.onmessage =function(e){

var msg= e.data;

var node = document.createTextNode(msg);

var div = document.createElement("div");

div.appendChild(node);

document.body.insertBefore(div,input);

input.scrollIntoView();

}

input.onchange =function(){

var msg = nick +": "+input.value;

socket.send(msg);

input.value='';

}

};

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值