Magdy Atef Zahran

ازاي تعمل شات لايف أو إشعارات لحظية أو تعرض عداد مشاهدين وغيره باستخدام WebSockets في Next.js

لو شغال على مشروع ومطلوب منك تعمل شات لايف أو إشعارات لحظية أو تعرض عدد المشاهدين أونلاين
تعمل إيه؟
الحل هو WebSockets مع Next.js
فتعالي أشرح لك, كل حاجة من الصفر بأسلوب بسيط أن شاء الله

أولًا: يعني إيه WebSockets؟

إيه هو WebSockets؟

اتصال مباشر ومستمر بين المتصفح والسيرفر، وأي تحديث يحصل على السيرفر يوصل فورًا للمستخدم من غير ما يعمل Reload.
مثال توضيحي

لو حد كتب رسالة في الشات تظهر فورا لكل الناس او حد دخل البث المباشر ف العداد يزيد لحظتها.

ثانيًا: إزاي نشغل WebSockets مع Next.js؟

تثبيت الباكدجات الأساسية:

npm install ws

إنشاء WebSocket Server في Next.js:

import { WebSocketServer } from ‘ws’; let wss = new WebSocketServer({ noServer: true }); wss.on(‘connection’, (ws) => { console.log(“عميل جديد متصل ✅”); ws.send(“مرحبًا بيك في الشات 🎉”); ws.on(‘message’, (message) => { wss.clients.forEach((client) => { if (client.readyState === 1) { client.send(`رسالة جديدة: ${message}`); } }); }); ws.on(‘close’, () => { console.log(“عميل خرج من الشات ❌”); }); }); export default (req, res) => res.status(200).json({ message: ‘WebSocket جاهز 🚀’ }); export const config = { api: { bodyParser: false } };

شرح سريع للي عملناه هنا:

عملنا WebSocket Server يستقبل الاتصالات.
أول ما حد يدخل يبعتله رسالة ترحيب.
ولما حد يبعت رسالة يبعتهالك أنت وكل الناس المتصلة.
يسجل في اللوج لما حد يدخل أو يخرج.

توصيل الـ Client بالـ WebSocket واستقبال الرسائل لحظيًا:

import { useEffect, useRef, useState } from ‘react’; export default function Chat() { const [messages, setMessages] = useState([]); const [input, setInput] = useState(”); const socket = useRef(null); useEffect(() => { socket.current = new WebSocket(‘ws://localhost:3000/api/socket’); // استقبال الرسائل وعرضها socket.current.onmessage = (e) => { setMessages((prev) => […prev, e.data]); }; socket.current.onopen = () => console.log(“تم الاتصال بالـ WebSocket 🚀”); socket.current.onclose = () => console.log(“تم قطع الاتصال ❌”); return () => socket.current.close(); }, []); const sendMessage = () => { if (socket.current.readyState === WebSocket.OPEN) { socket.current.send(input); setInput(”); } else { console.error(“الاتصال مقفول، جرّب تفتح الصفحة تاني”); } }; return ( <div> <ul> {messages.map((msg, i) => <li>{msg}</li> )} </ul> setInput(e.target.value)} placeholder=”اكتب رسالة…” /> <button>إرسال 🚀</button> </div> ); }

شرح سريع للي عملناه هنا:

فتحنا اتصال مباشر مع WebSocket أول ما الصفحة تفتح.
وعرضنا كل الرسائل أول ما توصل من السيرفر.
وعملنا زرار يبعت الرسالة لكل المتصلين لحظتها.

💡 طيب ازاي تعمل اللي قولت عليه أي اول المقال؟

عداد مشاهدين لحظي(Live Viewers):

فكر فيها كأن كل شخص بيدخل بيتصل بالسيرفر فالسيرفر يزيد عداد الأشخاص المتصلين ويبعته لكل الناس. يعني ببساطة:

لما حد يتصل بالـ WebSocket، زوّد عداد المتصلين.
لما حد يفصل، قلّل العدد.
ابعت العدد لكل المتصلين في كل تحديث.

هتعمل متغير مثلا let viewers = 0 في السيرفر تزوده لما حد يتصل وتنقصه لما حد يخرج. وتبعته لكل المتصلين بـ wss.clients.forEach() كل شوية.

غرف محادثة منفصلة (Chat Rooms):

الغرف هي زي تقسيمات مستقلة كل مجموعة ليها شات خاص الفكرة إنك تعمل لكل غرفة مجموعة clients منفصلة. يعني لما حد يدخل يختار غرفة تضيفه لقائمة العملاء بتاعت الغرفة دي بس.

هتستخدم Map عشان تربط كل غرفة بقائمة المتصلين فيها وبعدها لما حد يبعت رسالة توصل بس للي في نفس الغرفة.

إشعارات لحظية (Real-Time Notifications):

الإشعارات نفس فكرة الرسايل بس بدل ما تعرضها في الشات هتظهر كـ Popup

- السيرفر يبعت رسالة
- العميل يستقبلها ويعرضها بشكل مختلف زي بانر أو صوت تنبيه مثلاً.

وبكده نكون خلصنا شرحنا عن الـWebSockets في Next.js
لوعندك سؤال أو استفسار، اكتب في الكومنتات.

Borma