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

Posted 2023-02-22

【中文标题】如何配置 socket.io 来监听客户端

【英文标题】：How to configure socket.io to listen to client side

【发布时间】：2020-06-25 10:51:00

【问题描述】：

我是使用套接字的新手，并不完全了解它们的工作原理。

当我加载我的网站时，我收到此错误，我只是收到此错误“chat.js:4563 GET http://localhost/socket.io/?EIO=3&transport=polling&t=N3Jn3vr404 (Not Found)”

我错过了什么？我假设我必须让这两个端口以某种方式相互工作？

socket.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

【问题讨论】：

确保 Apache 尚未使用端口 80

您的程序可能实际上无法在某些平台上使用 :80。 Web 服务器黑客攻击的第一条规则：始终使用更高的伪随机端口进行测试。如果你使用 :1968 会发生什么？

【参考方案1】：

由于 express 和 socket.io 都使用http，它们将共享同一个端口。所以你应该在端口 3000 而不是端口 80 上监听套接字连接。

您可以只使用io 初始化套接字对象而不使用url，因为它与您的快速应用程序位于同一端口上。 Socket.io 将连接到为页面提供服务的同一主机

const socket = io();

入门页面here 提供了相同的概述。

【讨论】：

谢谢，将参数留空不起作用，但在我的本地主机上更改了端口号；但是我正在使用 ngrok 对此进行测试，但在另一台电脑上我仍然遇到相同的错误。

可能是因为您在io 连接中有localhost url。你可以改变它并测试

我已经对此进行了测试，它会导致同样的错误，并且还会在我的电脑上破坏它。