Aleksandr-JS-Developer
@Aleksandr-JS-Developer
Бери и делай

Как организовать работу Vue-cli, Express и socket.io?

Добрый день.
Разрабатываю приложение на Vue (с использованием cli). Потребовался бэк.
Выбрал Express и socket.io на nodeJS.

Только вот не понимаю как запустить всё это. Есть дев сервер, который поднимает Vue-cli, есть сервер, который поднимаю я через nodeJS.

Проблема в том, что никак не могу сделать, чтобы всё работало. Когда клиент подключается к серверу node, то я отправляю ему файл index.html из /public.

5f1ffe9049d46730098402.png

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' );
});

Но файл приходит пустой (исходный index.html, с одним пустым тэгом div#app), хотя Vue-cli работает и сборка удачна.

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>


За два дня ничего понятного и чёткого не нагуглил. Даже задал похожий вопрос недавно на хабре. Но, опять-таки, ничего не понял (((
  • Вопрос задан
  • 305 просмотров
Решения вопроса 1
notiv-nt
@notiv-nt
Как ваше ничего? Да, моё тоже
я вот тоже ниче не понял

Есть дев сервер, который поднимает Vue-cli
, соответственно vue-cli вешает его на localhost:8000, или что там? не помню

есть сервер, который поднимаю я через nodeJS

да, на localhost:3000

Когда клиент подключается к серверу node, то я отправляю ему файл index.html из /public


так ведь vue-cli поднимает сервер для этого index.html на кой вы его во второй раз отдаёте?

гуглите о том, как работает rest api и поймите что ваша нода не должна отдавать никакие html-ки, а только данные (в json) (обычно)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы