مشكلةتم الحل

حل مشكلة WebSocket Connection Failed: Error during WebSocket handshake: Unexpected response code: 400 في Socket.IO

·١٦ يوليو ٢٠٢٦·2 مشاهدة

يا جماعه أنا بكتب سكريبت شات حي (Real-time Chat) باستخدام Socket.IO في الـ Node.js والـ Frontend شغال بـ React. المطلوب: عمل اتصال مباشر (Persistent Connection) بين العميل والباك إند لنقل الرسائل في نفس اللحظة. المشكلة اللي مقابلاني: أول ما بفتح الأبلكيشن الاتصال مش بيكتمل والـ Console في المتصفح بيطلعلي الخطأ ده باستمرار كل كام ثانية: WebSocket connection to 'ws://localhost:4000/socket.io/?EIO=4&transport=websocket' failed: Error during WebSocket handshake: Unexpected response code: 400 وبيتكرر محاولات إعادة الاتصال (Polling) بدون أي فائدة والرسائل مش بتوصل.

JavaScript

const express = require('express');
const { Server } = require('socket.io');

const app = express();

// الخطأ هنا: تم تمرير تطبيق express مباشرة بدلاً من سيرفر HTTP
const io = new Server(app, {
    cors: {
        origin: "http://localhost:3000"
    }
});

io.on('connection', (socket) => {
    console.log('مستخدم جديد اتصل:', socket.id);
});

app.listen(4000, () => console.log('Server running on port 4000'));

مشاكل-javascript مشاكل-socket.io كود-websocket مشاكل-nodejs أخطاء-express-js برمجة-real-time مشاكل-back-end حل-مشاكل-websocket تطوير-شبكات

التعليقات (1)

الحل المعتمد

abdelrahmanمنذ 90 يوم

سبب المشكلة: مكتبة Socket.IO تحتاج إلى الوصول المباشر لطبقة الـ HTTP Server للقيام بعملية ترفيع الاتصال (HTTP Upgrade Request) تحويل الاتصال من HTTP عادي إلى بروتوكول ws:// (WebSocket Handshake). تمرير متغَيّر app الخاص بـ Express مباشرة لـ new Server() لا يكفي لأن Express عبارة عن دالة معالجة طلبات (Request Handler) وليس HTTP Server كاملاً. الحل الصحيح والنهائي: إنشاء سيرفر HTTP باستخدام وحدة http المدمجة في Node.js وتعريف Express و Socket.IO عليه كالتالي:

JavaScript

const express = require('express');
const http = require('http'); // 1. استدعاء وحدة HTTP المدمجة
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app); // 2. إنشاء HTTP Server وتمرير Express له

// 3. ربط Socket.IO بـ HTTP Server المُنشيء
const io = new Server(server, {
    cors: {
        origin: "http://localhost:3000"
    }
});

io.on('connection', (socket) => {
    console.log('مستخدم جديد اتصل بنجاح:', socket.id);
});

// 4. تشغيل السيرفر عن طريق server.listen وليس app.listen
server.listen(4000, () => {
    console.log('Server and WebSockets running on port 4000');
});

سجّل دخولك لإضافة تعليق

تسجيل الدخول

حل مشكلة WebSocket Connection Failed: Error during WebSocket handshake: Unexpected response code: 400 في Socket.IO

kamel

·١٦ يوليو ٢٠٢٦·2 مشاهدة

JavaScript

const express = require('express');
const { Server } = require('socket.io');

const app = express();

// الخطأ هنا: تم تمرير تطبيق express مباشرة بدلاً من سيرفر HTTP
const io = new Server(app, {
    cors: {
        origin: "http://localhost:3000"
    }
});

io.on('connection', (socket) => {
    console.log('مستخدم جديد اتصل:', socket.id);
});

app.listen(4000, () => console.log('Server running on port 4000'));