如何配置socket.io监听客户端

Question

I am new to using sockets and do not fully understand how they work.

When i load my website I get this error I just get this error "chat.js:4563 GET http://localhost/socket.io/?EIO=3&transport=polling&t=N3Jn3vr 404 (Not Found)"

What am I missing? I am assuming I have to make the two ports work with one another somehow?

socket.js file:

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 file:

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

blade file:

@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

As both express and socket.io are using http they will share the same port. So you should listen to socket connections on port 3000 instead of port 80.

You could just initialize the socket object with io without the url, as it's on the same port as your express app. Socket.io will connect to the same host that serves the page

const socket = io();

The getting started page here gives an overview of the same.