Not able to connect VueJS and expressJS

Question

So, I have been currently diving into real time apps but not able to even connect the client with the server. I want that for every new tweet being posted ( which is working perfectly with mongodb ) the server emits an event. I read many stackoverflow questions, tried all possible ways of connecting socket.io given there, what I am doing wrong Help would be highly appreciated app.js:

const http = require('http');
const express = require('express');
const app = express();
const server = http.createServer(app);
const path = require('path');
require('./server/db');
const userRouter = require('./server/routers/user');
const tweetRouter = require('./server/routers/tweet');


const cors = require('cors');
const socketIO = require('socket.io');
const io = socketIO(server);

app.set('scoketio',io);
io.on("connection",function(socket){
  console.log("socket connected");
  
});
app.use(userRouter);
app.use(tweetRouter);
server.listen(8081,function(err){
  if(err){
        console.log("some error");
    }
    else {
        console.log("hosted..",err)
    }
})

tweetRouter:

const Tweet = require('../models/tweet');


const bodyParser = require('body-parser');
const TweetRouter = require('express').Router()
TweetRouter.post('/tweet',bodyParser.json(),async (req,res)=>{
    console.log("posting tweet")
   // console.log(io.emit)
   // console.log(req.io);
    var socketio = req.app.get('socketio');
    socketio.on("connection",function(socket){
        console.log("s",socket)
    });
    await Tweet.addTweet(req.body);
    res.send()
});
// other stuff down here , all working fine

tweets.vue

<template>
<div class="loader" v-if="!done">
<b-spinner variant="primary" ></b-spinner>
</div>
     
    <div class="tweet-container" v-else>
       
        <tweet v-for="tweet in tweets" :repli="tweet.reply" :id="tweet._id"  :key="tweet._id" :name="tweet.Name" :image="tweet.profileImage" :text='tweet.text' :likes="tweet.likes" :replies ="tweet.replies" :User="tweet.user"></tweet>
       
    </div>
</template>
<script>
import tweetview from '../components/tweet-view'
import {mapState} from 'vuex'

//import func from '../../vue-temp/vue-editor-bridge';

//import firebase from 'firebase';
//import func from '../../vue-temp/vue-editor-bridge';
export default {
    components:{
        "tweet":tweetview,
        
    },
    computed:mapState(['user','tweets',"done"]),
    sockets:{
        newtweet(){
            console.log("new tweer") // here it is
        }
    },
    created(){
      //  console.log("socket",socket.on("connection"));
      
    }
    
}
</script>

Answer 1

You require cors but never use it.

Try this one:

const cors = require('cors');

app.use(cors());