HTML5 服务器发送事件(server-sent event)

服务端代码

server.SimpleSocketServer

package server;

import java.io.BufferedReader;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.OutputStream;
import java.net.ServerSocket;
import java.net.socket;
import java.util.Random;

public class SimpleSocketServer {
	
	public void doAccept(Socket socket) throws Exception{
		InputStream is = socket.getInputStream();
		
		System.out.println("receive below information from client ... ");
		byte[] bytes = new byte[1024];
		int length = -1;
		while((length=is.read(bytes, 0, 1024))>0){
			int breakLineCount = 0;
			for(int i=0;i<length;i++){
				char c = (char) bytes[i];
				System.out.print(c);
				if('\n'==c){
					breakLineCount++;
				}
			}
			if(breakLineCount>1){
				break;
			}
		}
		
		String response = getSimpleRespose();
		OutputStream os = socket.getoutputStream();
		os.write(response.getBytes());
		
		os.flush();
		
		socket.close();
		
	}
	
	private String getSimpleRespose() throws Exception{
		InputStream is = this.getClass().getResourceAsstream("simple_response");
		
		BufferedReader br = new BufferedReader(new InputStreamReader(is));
		
		String line = null;
		
		StringBuilder response = new StringBuilder();
		
		while((line=br.readLine())!=null){
			response.append(line).append("\n");
		}
		
		String text = getRandomres();
		
		response.append("Content-Length:"+text.length()).append("\n\n")
				.append(text);
		
		return response.toString();
	}
	
	private String getRandomres(){
		Random random = new Random();
		if(random.nextInt(10)%2==0){
			return getDataWithEventRes();
		}else{
			return getDataRes();
		}
	}
	
	private String getDataRes(){
		Random random = new Random();
		int randomValue = random.nextInt(1000);
		String text = "data:the random value is : "+randomValue;
		text+="\n\n";
		return text;
	}
	
	private String getDataWithEventRes(){
		Random random = new Random();
		int randomValue = random.nextInt(1000);
		String text = "data:the random value is : "+randomValue+"\n";
		text+="event:myevent";
		text+="\n\n";
		return text;
	}
	
	public void start() throws Exception{
		ServerSocket serverSocket = new ServerSocket(8888);
		
		while(true){
			Socket socket = serverSocket.accept();
			doAccept(socket);
		}
		
	}
	public static void main(String[] args) throws Exception{
		
		new SimpleSocketServer().start();
	}
}

server/simple_response

HTTP/1.1 200 OK
Content-Type: text/event-stream

客户端html

<!DOCTYPE html>
<html>
<body>
    <h1>获得服务器更新</h1>
    <div id="result"></div>

 <script>
    if(typeof(EventSource)!=="undefined"){
        var source=new EventSource("http://localhost:8888/");
        source.onopen = function(){
            console.log("connection opened ... ");
        };

        source.onmessage=function(event){
            document.getElementById("result").innerHTML+=event.data + "<br />";
        };

        source.addEventListener("myevent", function(event) {
            console.log("event:"+event.type);
            console.log(event.data);
        });

        source.onerror = function(){
            console.log("connection close ... ");
        };

    }else{
      document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events...";
    }
</script>

</body>
</html>

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码