Client mit Server über Socket.io verbinden

Ich bin relativ neu in node.js und seinen Addons, daher ist dies wahrscheinlich eine Anfängerfrage.

Ich versuche, eine einfache HTML-Seite auf einem Webserver zu erhalten, der eine Verbindung zu einem anderen Server herstellt, auf dem node.js mit websocket.io ausgeführt wird.

Mein Code sieht so aus:

Klient

<script src="https://stackoverflow.com/questions/9945693/socket.io/socket.io.js"></script>
<script>
    // Create SocketIO instance, connect

    var socket = new io.Socket();

    socket.connect('http://127.0.0.1:8080'); 

    // Add a connect listener
    socket.on('connect',function() {
      console.log('Client has connected to the server!');
    });
    // Add a connect listener
    socket.on('message',function(data) {
      console.log('Received a message from the server!',data);
    });
    // Add a disconnect listener
    socket.on('disconnect',function() {
      console.log('The client has disconnected!');
    });

    // Sends a message to the server via sockets
    function sendMessageToServer(message) {
      socket.send(message);
    };
</script>

Serverseitig

// Require HTTP module (to start server) and Socket.IO
var http = require('http');
var io = require('socket.io');
var port = 8080;

// Start the server at port 8080
var server = http.createServer(function(req, res){ 
    // Send HTML headers and message
    res.writeHead(200,{ 'Content-Type': 'text/html' }); 
    res.end('<h1>Hello Socket Lover!</h1>');
});

server.listen(port);

// Create a Socket.IO instance, passing it our server
var socket = io.listen(server);

// Add a connect listener
socket.on('connection', function(client){ 
    console.log('Connection to client established');

    // Success!  Now listen to messages to be received
    client.on('message',function(event){ 
        console.log('Received message from client!',event);
    });

    client.on('disconnect',function(){
        clearInterval(interval);
        console.log('Server has disconnected');
    });
});

console.log('Server running at http://127.0.0.1:' + port + "https://stackoverflow.com/");

Das Starten des Servers funktioniert einwandfrei und läuft http://localhost:8080 in meinem Browser funktioniert auch und gibt wie erwartet ‘Hello Socket Lover’ zurück. Aber ich möchte eine andere Seite dazu bringen, mit den Sockets zu sprechen, und keine von node.js aus ausführen.

Aber wenn ich es ausführe, passiert nichts und die Chrome-Konsole kehrt zurück:

Failed to load resource            http://undefined/socket.io/1/?t=1333119551736
Failed to load resource            http://undefined/socket.io/1/?t=1333119551735

Ich war den ganzen Tag dabei. Irgendeine Hilfe?

Haben Sie versucht, das Socket.io-Skript nicht von einer relativen URL zu laden?

Sie verwenden:

<script src="https://stackoverflow.com/questions/9945693/socket.io/socket.io.js"></script>

Und:

socket.connect('http://127.0.0.1:8080');

Du solltest es versuchen:

<script src="http://localhost:8080/socket.io/socket.io.js"></script>

Und:

socket.connect('http://localhost:8080');

Schalter localhost:8080 mit allem, was zu Ihrem aktuellen Setup passt.

Außerdem kann es je nach Konfiguration zu Problemen bei der Kommunikation mit dem Server kommen, wenn die Client-Seite von einer anderen Domäne geladen wird (Richtlinie des gleichen Ursprungs). Dies kann auf verschiedene Weise überwunden werden (außerhalb des Rahmens dieser Antwort, google/SO it).

Sie müssen sicherstellen, dass Sie vor Ihrem Link zu socket.io einen Schrägstrich hinzufügen:

<script src="https://stackoverflow.com/socket.io/socket.io.js"></script>

Dann in der Ansicht / dem Controller einfach Folgendes tun:

var socket = io.connect()

Das sollte dein Problem lösen.

Anstatt von:

var socket = new io.Socket();

Versuchen:

const socket = io();

Und fügen Sie auch eine Serverdatei hinzu:

const http = require('http');
const express = require('express');
const app = express();
const server = http.createServer(app);
app.use(express.static(__dirname + '/public'));
const io = require('socket.io')(server);
const PORT = 5000;

server.listen(PORT, () => {
console.log(`Server is Listening On Port ${PORT}`);
});