How to organize the work of Vue-cli, Express and socket.io?

A

Alexander2020-07-28 13:34:28

Node.js

Alexander, 2020-07-28 13:34:28

Good afternoon.
I am developing an application on Vue (using cli). Needed a back.
Chose Express and socket.io on nodeJS.

I just don't understand how to run it. There is a dev server that raises Vue-cli, there is a server that I raise through nodeJS.

The problem is, I can't seem to get it to work. When a client connects to a node server, I send it an index.html file from /public.

server.js

const PORT = 3000;
console.log( `server started, port: ${PORT}\n` );

const express = require('express');
const app = express();
const server = require('http').createServer( app );
      server.listen( PORT );
const io = require( 'socket.io' ).listen( server );

app.get( '/', function( req, res ){
    res.sendFile( __dirname + '/public/index.html' );
});

io.sockets.on( 'connection', socket =>{
    connections.push( socket );
    console.log( `users (connected): ${connections.length}\n` );
    
    socket.on( 'disconnect', data =>{
        connections.splice( connections.indexOf( socket ), 1 );
        console.log( `users (disconnected): ${connections.length}\n` );
    });
    
    io.sockets.emit( 'test', 'test' );
});

But the file comes empty (original index.html, with one empty div#app tag), although Vue-cli works and the build is successful.

http://192.168.0.120:3000/

<html lang="ru"><head>
    <meta charset="utf-8">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>title</title>
  </head>
  <body cz-shortcut-listen="true">
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  

</body></html>

For two days, I didn’t google anything understandable and clear. I even asked a similar question recently on Habré. But, again, I did not understand anything (((

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

M

Michael, 2020-07-28
@Aleksandr-JS-Developer

I don't understand anything either

There is a dev server that raises Vue-cli

, respectively, vue-cli hangs it on localhost:8000, or what is there? I do not remember

there is a server that I raise through nodeJS

yes, on localhost:3000

When the client connects to the node server, then I send him the index.html file from /public

so after all vue-cli lifts the server for this index.html on what you give it for the second time?
google about how the rest api works and understand that your node should not return any html, but only data (in json) (usually)