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

服务端代码

server.SimpleSocketServerpackage 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

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_responseHTTP/1.1 200 OK

Content-Type: text/event-stream

客户端htmlhtml>

获得服务器更新

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 + "
";

};

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...";

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5Server-Sent Event(SSE)是一种允许服务器向客户端推送事件的技术。与传统的HTTP请求不同,SSE允许服务器向客户端发送数据,而无需客户端明确地请求。这种单向通信的方式使得SSE非常适合用于实时应用程序,例如股票报价、天气预报、社交媒体更新等。 SSE的工作原理是通过在服务器上创建一个持久连接,该连接保持打开状态,直到服务器有数据要发送给客户端。当服务器有新数据时,它会将数据发送到客户端,客户端通过监听事件来接收数据。SSE使用了EventSource API来实现这种事件监听机制。 以下是一个简单的SSE示例,其中服务器每隔1秒向客户端发送一条消息: ```html <!DOCTYPE html> <html> <head> <title>Server-Sent Event Example</title> </head> <body> <div id="messages"></div> <script> var eventSource = new EventSource("server.php"); eventSource.onmessage = function(event) { document.getElementById("messages").innerHTML += event.data + "<br>"; }; </script> </body> </html> ``` 在上面的示例中,服务器端代码可以是PHP、Node.js或其他任何支持SSE的服务器端语言。在本例中,服务器端代码是一个名为server.php的文件,其内容如下: ```php <?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $i = 0; while (true) { echo "data: This is message " . $i++ . "\n\n"; ob_flush(); flush(); sleep(1); } ?> ``` 在上面的PHP代码中,我们首先设置了响应头,告诉浏览器这是一个SSE响应。然后我们使用一个无限循环来模拟服务器不断发送消息的情况。每次循环中,我们都会向客户端发送一条消息,并使用ob_flush()和flush()函数来确保消息被立即发送到客户端。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值