AngularJS连接Socket服务端问题求助：5000端口无法监听连接

Hey there! Let's figure out why your AngularJS app can't connect to your Socket server on port 5000—especially since other clients are working fine. Here are the key things to check, step by step:

First off, don't mix up raw TCP Sockets with WebSockets—they're totally different protocols, and browsers (like the one running your AngularJS app) only support WebSockets natively.

• If your Python server uses the built-in socket module for raw TCP, AngularJS can't connect directly to it from the browser. You'll need to switch your server to use a WebSocket framework like websockets or Flask-SocketIO, or add a proxy layer.
• If you intended to use WebSockets, double-check your server is configured to handle WebSocket handshake requests, not just raw TCP connections.

Browsers enforce strict cross-origin rules for WebSocket connections. Even if your frontend and server are on the same machine, if your AngularJS app is served from a different port (like 8080 for development), your server needs to explicitly allow that origin.

• For a Python WebSocket server using the websockets library, add origin validation:

  async def handle_connection(websocket):
      # Replace with your Angular app's origin (e.g., http://localhost:8080)
      allowed_origin = "http://localhost:8080"
      if websocket.origin != allowed_origin:
          await websocket.close(code=1008)
          return
      # Rest of your connection logic
  

• If you're using Flask-SocketIO, enable CORS with the cors_allowed_origins parameter:

  from flask import Flask
  from flask_socketio import SocketIO
  from flask_cors import CORS
  
  app = Flask(__name__)
  CORS(app)
  socketio = SocketIO(app, cors_allowed_origins="http://localhost:8080")
  

Let's make sure your app.js is setting up the connection correctly. Here's a solid example using the native WebSocket API in AngularJS:

angular.module('socketApp', [])
  .controller('SocketCtrl', function($scope) {
    // Use ws:// for unencrypted, wss:// for secure connections
    const socket = new WebSocket('ws://localhost:5000');

    socket.onopen = function() {
      console.log('Successfully connected to WebSocket server!');
      socket.send('Hello from AngularJS');
    };

    socket.onmessage = function(event) {
      console.log('Received message:', event.data);
      // Wrap UI updates in $scope.$apply() since WebSocket events are outside Angular's digest cycle
      $scope.$apply(() => {
        if (!$scope.messages) $scope.messages = [];
        $scope.messages.push(event.data);
      });
    };

    socket.onerror = function(error) {
      console.error('WebSocket error:', error);
    };

    socket.onclose = function(event) {
      console.log('WebSocket connection closed:', event);
    };
  });

• Common mistakes here: using http:// instead of ws:// for the WebSocket URL, typos in the port number, or forgetting to use $scope.$apply() when updating the UI from the WebSocket callback.

If your Python server is only bound to 127.0.0.1, it might not accept connections from the browser's context. Bind it to 0.0.0.0 to allow connections from any address:

# For raw TCP (if you switch to WebSocket, adjust accordingly)
import socket

server = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
server.bind(('0.0.0.0', 5000))  # Bind to all interfaces
server.listen(5)

# For WebSocket with websockets library
import asyncio
import websockets

async def handle_connection(websocket):
    # Your logic here
    pass

start_server = websockets.serve(handle_connection, '0.0.0.0', 5000)
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

• Verify no other process is using port 5000: run lsof -i :5000 (macOS/Linux) or netstat -ano | findstr :5000 (Windows) to check.
• Make sure your local firewall (Windows Firewall, macOS Firewall, Linux ufw) allows incoming connections on port 5000.

If you can share snippets of your actual app.js and Python server code, we can dive deeper into specific issues!

内容的提问来源于stack exchange，提问作者vmontazeri