重庆网站建设首选卓光,wap网站和app开发,wordpress函数语言,机械厂网站建设首先是客户端#xff0c;看着比较简单。但实际应用中可能要比这复杂#xff0c;因为默认sse只支持get请求#xff0c;而且没法携带header。所以如果默认的方法达不到需求的话可能需要额外实现#xff0c;当然也可以引用第三方库#xff0c;比如rangermauve/fetch-event-so…首先是客户端看着比较简单。但实际应用中可能要比这复杂因为默认sse只支持get请求而且没法携带header。所以如果默认的方法达不到需求的话可能需要额外实现当然也可以引用第三方库比如rangermauve/fetch-event-source。所以有谁会自己实现呢
if(typeof(EventSource)!undefined)
{var sourcenew EventSource(http://localhost:9001);source.onopen function(event) {console.log(onopen)};source.onmessagefunction(event){console.log(onmessage);console.log(data is , event.data);document.getElementById(result).innerHTMLevent.data br;};
}
else
{// 浏览器不支持 server-sent 事件
}
服务端java代码如下
package com.zhouz.signing.controller.v1;import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;RestController
CrossOrigin
public class TestController {protected static Logger logger LoggerFactory.getLogger(UserController.class);RequestMapping(value /testsse)ResponseBodypublic void getStreamDataImprove(HttpServletResponse httpServletResponse) {httpServletResponse.setContentType(text/event-stream); // content-type必须是text/event-streamhttpServletResponse.setCharacterEncoding(utf-8); // 编码必须是utf-8// 这里用死循环是为了和客户端建立长连接while (true) {String s retry:10000\n; // retry:后面跟单位为毫秒的数字客户端会在断开连接后按照设置的毫秒数进行重连String i new Date().toString();s id: i \n; // id: 设置id可以在比如客户端网络错误的时候下一次再连接时向服务端发送的请求中header中带有Last-Event-Id参数服务端拿到这个值就可以将未推送的数据再次推送给客户端s data: i \n\n; // data: 设置数据注意一则消息的最后必须要有两个换行符try {PrintWriter pw httpServletResponse.getWriter();Thread.sleep(1000L); // 如果不想给客户端发送消息过于频繁可以设置等待时间pw.write(s);pw.flush();if (pw.checkError()) {logger.info(客户端断开连接);break; // 判断出错后需要结束死循环本次请求也就结束了。}} catch (IOException | InterruptedException e) {e.printStackTrace();}}}
}服务端php代码
?php
header(Access-Control-Allow-Origin: *);
header(Access-Control-Allow-Methods: *);
header(Content-Type: text/event-stream);
header(Cache-Control: no-cache);while(true) {$time date(r);echo data: {$time}\n\n;ob_flush();flush();sleep(1);// TODO 这里不知道是否可以用这个方法来判断客户端断开了连接if (connection_aborted()) {break;}
} 需要注意的是如果服务端不加死循环前端看着是3秒发起一个请求。而加了死循环之后前端实际上只发送了一次请求。
