Как настроить socket.io для прослушивания на стороне клиента

Question

Я новичок в использовании сокетов и не до конца понимаю, как они работают.

Когда я загружаю свой сайт, я получаю эту ошибку, я просто получаю эту ошибку "chat. js: 4563 GET http://localhost/socket.io/?EIO=3&transport=polling&t=N3Jn3vr 404 (Не найдено) "

Чего мне не хватает? Я предполагаю, что мне нужно как-то заставить эти два порта работать друг с другом?

сокет. js файл:

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);

http.listen(3000, function(){
  console.log('listening on *:3000');
});

io.on('connection', function(socket){
  socket.on('chat.message', function(message) {
     console.log('x: ' +  message)
  })
});

chat. js файл:

import io from 'socket.io-client';

const socket = io('http://localhost:80');

var app = new Vue({
    el: '#app',
    mounted() {
    },
    data: {
      message: null
    },
    methods: {
        send() {
            socket.emit('chat.message', this.message)
    }
}})

файл блейда:

@extends('dashboard.base')

@section('content')

    <div class="container-fluid">
        <div class="fade-in">
            <div class="row">
                <div class="card mx-auto text-center w-50">
                    <div  class="card-header">
                        Live Chat
                    </div>
                    <div id="app" class="card-body">
                        <input v-model="message" type="text">
                        <span class="btn btn-success" @click="send">Send</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('javascript')
    <script src="{{ mix('js/chat.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
@endsection

Answer 1

Поскольку express и socket.io используют http, они будут использовать один и тот же порт. Поэтому вы должны прослушивать сокетные соединения на порту 3000 вместо 80.

Вы можете просто инициализировать объект сокета с io без URL-адреса, поскольку он находится на том же порту, что и ваше приложение express. Socket.io подключится к тому же хосту, который обслуживает страницу

const socket = io();

Начальная страница здесь дает обзор того же.