前端长链接EventSource

webSocket:双向长链接

EventSource: 单向长链接

创建EventSource

let es = new EventSource(`http://127.0.0.1/${uuid}`)
es.addEventListener('message', function(evt) {
    let data = JOSN.parse(evt.data)
})

ps:服务器重启的话。就会断开需要重连做个呼吸重连就好

let timer = null;

function esUpdate(){
  if(timer != null)clearTimeout(timer);
  timer = setTimeout(esInit, 30 * 1000);
}

function esInit(){
  esUpdate();
  let es = new EventSource(`http://127.0.0.1/${uuid}`);
  es.addEventListener('message', function(e){
    esUpdate();
  },false);
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
编写 EventSource前端使用方法如下: 1. 创建 EventSource 对象: ```javascript var eventSource = new EventSource('/your-event-stream'); ``` 2. 添加事件监听器来处理接收到的事件: ```javascript eventSource.addEventListener('eventName', function(event) { // 在这里处理接收到的事件数据 var eventData = JSON.parse(event.data); // ... }); ``` 3. 可选:添加错误处理的事件监听器: ```javascript eventSource.addEventListener('error', function(event) { // 在这里处理错误 console.error('EventSource error:', event); }); ``` 4. 可选:关闭 EventSource 连接: ```javascript eventSource.close(); ``` 5. 在服务器端,你需要设置一个路由来处理客户端的 EventSource 连接请求,并发送事件数据给客户端。这个路由需要返回以下的响应头信息: ```javascript Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive ``` 6. 在服务器端,你需要按照以下格式发送事件数据给客户端: ```javascript response.write('event: eventName\n'); response.write('data: ' + JSON.stringify(eventData) + '\n\n'); response.flush(); // 确保数据被发送到客户端 ``` 其中,`eventName` 是你定义的事件名称,`eventData` 是你要发送的事件数据。 请注意,EventSource 使用的是轮询技术,在客户端与服务器之间维持一个持久连接。服务器会发送新的事件数据给客户端,而客户端则使用事件监听器来处理接收到的数据。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值