AI聊天方案：vue+nodeJs+SSE

sse和websocket有点类似，相比于传统的HTTP协议，他们的通信成本更低，可以建立长连接，实时性高，不必每次收发消息都要进行繁琐的握手挥手。而sse和websocket的区别在于，sse是单向的，只能服务器向客户端发送消息，而websocket是双向的。如果只是单纯实现一个消息推送，而不考虑什么已读未读之类的客户端返回数据，用SSE可能更好一些。

sse本身还是基于HTTP协议的，但是会在请求头中进行特殊的设置，告诉客户端接收的是SSE数据。

今天使用node.js的express框架搭一个后端服务器，客户端用vue搭一个。简单实现一下功能。

一、服务器

用的express框架，做的比较简单，创建一个server.js的文件即可

SSE和普通的HTTP协议的区别就在于响应头

因为前后的分离端口不同，所以最后一行要配置一下跨域

复制代码

const express = require("express"); 
const app = express(); 
app.get("/sse", (req, res) => { 
  // 设置 SSE 相关的响应头 
  res.setHeader("Content-Type", "text/event-stream;charset=utf-8"); 
  res.setHeader("Cache-Control", "no-cache"); 
  res.setHeader("Connection", "keep-alive"); 
  res.setHeader("Access-Control-Allow-Origin", "*"); // 允许跨域 
  let index = 0; 
  const timer = setInterval(() => { 
    res.write(`event:sseEvent\n`); 
    res.write(`id:${index}\n`); 
    res.write(`retry: 30000\n`); 
    res.write("data: " + JSON.stringify({ content: new Date() }) + "\n\n"); 
    index++; 
  }, 2000); 
  // 当客户端点击关闭时 
  req.on("close", () => { 
    clearInterval(timer); 
    res.end(); 
  }); 
}); 
app.listen(3000, () => { 
  console.log("服务开启成功"); 
});

这里的res.write(event:sseEvent\n)不是随便写的，客户端的要和这里匹配。打开控制台，输入node server，开启服务。

二、客户端

下面是MDN上关于SSE的文档：文档1 文档2

因为公司的node版本都比较老，所以简单创建了一个vue2项目。 url用你本地的地址，端口后端设的3000这里写3000就可以了。 addEventListener中监听的名字要和后端设置的相同。按钮startConn事件记得检测之前是否有创立过连接，不然会创建很多个。

复制代码

<template> 
  <div id="app">
    <button @click="startConn">建立连接</button>
    <button @click="endConn">关闭连接</button> 
    <div> {{ stateData }} </div>
    <div> 
      <div v-for="(item, index) in list" :key="index"> {{ item }} </div>
    </div> 
  </div> 
</template> 

<script> 
export default { 
  name: "App", 
  components: { 
    // HelloWorld 
  }, 
  data() { 
    return { 
      sse: null, 
      stateData: null, 
      list: [], 
    }; 
  }, 
  created() {}, 
  methods: { 
    startConn() { 
      let url = "http://192.168.1.111:3000/sse"; 
      const sse = new EventSource(url); 
      console.log(this.sse,'this.sse') 
      if(this.sse?.readyState==1){ 
        console.log('已建立连接') 
        return 
      } 
      this.sse = sse; 
      sse.onopen = (e) => { 
        let data = `SSE 连接成功，状态${sse.readyState}`; 
        this.stateData = data; 
        console.log("open", e); 
        console.log(data, sse); 
      }; 
      sse.addEventListener("sseEvent", (event) => { 
        const data = JSON.parse(event.data); 
        console.log(data, "data111111"); 
        this.list.push(data.content); 
        console.log(event, "event"); 
      }); 
      sse.onerror = (e) => { 
        console.log("error", e); 
      }; 
    }, 
    endConn() { 
      this.sse.close(); 
      console.log("end"); 
    }, 
  }, 
};
</script>

效果如下