SEE推送消息服务前后端链接 vue

h**#

已于 2023-08-11 10:44:38 修改

阅读量393

点赞数 1

分类专栏： javaScript vue 文章标签： javascript vue.js 前端

于 2023-08-10 11:10:33 首次发布

本文链接：https://blog.csdn.net/Hruibin/article/details/132205031

版权

vue 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

javaScript

4 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue项目中配置proxyTable解决跨域问题，并利用EventSource实现实时数据接收。开发者需修改config/index.js，启用WebSocket并监听后端推送的消息。

摘要由CSDN通过智能技术生成

vue本地项目配置代理，方便请求后端接口

找到config/index.js文件，修改一下内容，修改后重启项目

proxyTable: {'/xxx': {
      target: 'http://xxxxx:端口号/', // 接口域名
      // ws: true, // 是否启用websockets
      changeOrigin: true, // 开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
      pathRewrite: {
          '^/xxx': '/xxx' // 修改路径
      }

使用EventSource，它是SSE的客户端

let _this=this;
 if (!!window.EventSource) {
        //显示加载动画
        _this.Loading = true;
        //监听后端推送消息
        source.addEventListener(
          "方法名(chat)",//一般情况是请求url/最后的名称 例如：/dailog/chat
          function (e) {
          	//e.data 推送收到的数据
            let data = JSON.parse(e.data);
            _this.Loading = false;
          },
          false
        ); 
        //打开链接的监听，一般用不到
        source.addEventListener('open', function (e) {
        }, false);
        //监听后端推送结束，或者自己手动结束
        source.addEventListener("error", function (e) {
        	//手动此关闭链接
            source.close();
        });
      } else {
        console.log("当前浏览器不支持SSE");
      }