Displaying RSS feed on Vue.js frontend

断了今生、忘了曾经 提交于 2021-01-29 10:17:31

问题


I want to display a google alert feed on my "Dashboard.vue" from the component "Feed.vue". I got this working in javascript but not sure how to convert my js front end to Vue.

I am getting the error: io is not defined. Any ideas as to how I can resolve this and display the articles from the feed on my Vue.js application?

Backend code:

const feedparser = require('feedparser-promised');
const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);
const fs = require('fs');

server.listen(8000);
console.log('Server started on localhost:8000');

let url = 'https://www.google.ie/alerts/feeds/10663948362751557705/4511034072220974544';

// Declare a variable for the feed content
let feed = [];

// Parse the feed
feedparser.parse(url).then(items => {
  // Update the variable with the new data
  for (const [i, item] of items.entries()) {
    // Retrieve the ten first elements, with their title and description
    // And add them to the feed array
    if (i < 9) {
      feed.push({
        title: item.title,
        link: item.link
      });
    }
  }

  // Write it to a file so you can know how to parse it better
  // The callback is mandatory, but it's useless here
  fs.writeFile('feed.json', JSON.stringify(items, null, 2), 'utf-8', (data) => {});
});

// Define the default route
app.get('/', (req, res) => {
  // Render the page
  res.render('App.vue');

  // Send the data to the client using socket.io
  io.on('connection', io => {
    io.emit('feed', {
      feed: feed
    });
  });
});

Dashboard.vue

 <template>
   <li>
      {{feed.title}}
   </li>
</template>

<script>
   export default {
      props: ["feed"]
   }
</script>

Feed.vue

  <template>
   <ul>
      <feed v-for="feed in feeds" :feed="feed" :key="feed.title"></feed>
   </ul>
</template>

<script>
   import Feed from './Feed.vue'
   export default {
      components: {
         Feed
      },
      data () {
         return {
            feeds: []
         }
      },
      mounted() {
         this.subscribeToFeed();
      },
      methods: {
         subscribeToFeed() {
            const socket = io();
            socket.on('feed', data => {
               data.feed.entries().forEach(feed => {
                  this.feeds.push(feed);
               });
            });
         }
      }
   }


回答1:


Check this line:

const socket = io();

It seems you forgot to import the io module in this vue-component.



来源:https://stackoverflow.com/questions/60355804/displaying-rss-feed-on-vue-js-frontend

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!