{"id":12918,"date":"2025-02-19T12:00:17","date_gmt":"2025-02-19T09:00:17","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/next-jste-ozellestirilmis-socket-io-sunucusu\/"},"modified":"2025-02-19T12:00:17","modified_gmt":"2025-02-19T09:00:17","slug":"next-jste-ozellestirilmis-socket-io-sunucusu","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/next-jste-ozellestirilmis-socket-io-sunucusu\/","title":{"rendered":"Next.js’te \u00d6zelle\u015ftirilmi\u015f Socket.IO Sunucusu"},"content":{"rendered":"

<\/p>\n

Next.js’te \u00d6zelle\u015ftirilmi\u015f Socket.IO Sunucusu<\/p>\n

Merhaba! Bu makalede, Next.js uygulaman\u0131zda \u00f6zelle\u015ftirilmi\u015f bir Socket.IO sunucusu kurulumunu ad\u0131m ad\u0131m ele alaca\u011f\u0131z. Ger\u00e7ek zamanl\u0131 \u00f6zelliklere ihtiya\u00e7 duyan uygulamalar i\u00e7in Socket.IO, m\u00fckemmel bir \u00e7\u00f6z\u00fcm sunar. Ancak, Next.js’in kendi sunucu yap\u0131s\u0131yla nas\u0131l entegre edilece\u011fini anlamak \u00f6nemlidir.<\/p>\n

Neden \u00d6zelle\u015ftirilmi\u015f Bir Socket.IO Sunucusu?<\/h2>\n

Next.js’in API Routes \u00f6zelli\u011fi ile basit Socket.IO uygulamalar\u0131 olu\u015fturmak m\u00fcmk\u00fcn olsa da, daha karma\u015f\u0131k uygulamalar veya \u00f6l\u00e7eklenebilirlik ihtiya\u00e7lar\u0131 i\u00e7in \u00f6zelle\u015ftirilmi\u015f bir sunucu daha uygun olabilir. Bu yakla\u015f\u0131m, sunucu taraf\u0131ndaki i\u015f mant\u0131\u011f\u0131n\u0131 daha iyi kontrol etmenizi ve performans\u0131 optimize etmenizi sa\u011flar. \u00d6rne\u011fin, b\u00fcy\u00fck miktarda veri i\u015fleyen bir sohbet uygulamas\u0131 i\u00e7in \u00f6zelle\u015ftirilmi\u015f bir sunucu, API Routes’tan daha verimli \u00e7al\u0131\u015facakt\u0131r.<\/p>\n

Kurulum Ad\u0131mlar\u0131<\/h2>\n

\u0130lk olarak, projenize gerekli paketleri eklemeniz gerekiyor. Bunun i\u00e7in a\u015fa\u011f\u0131daki komutu kullanabilirsiniz:<\/p>\n

npm install socket.io next\n<\/code><\/pre>\n
Ard\u0131ndan,  pages\/api\/socket.js<\/code>  dosyas\u0131n\u0131 olu\u015fturun.  Bu dosya, Socket.IO sunucumuzun temelini olu\u015fturacakt\u0131r.  A\u015fa\u011f\u0131daki kod \u00f6rne\u011fi, basit bir soket ba\u011flant\u0131s\u0131 ve mesaj g\u00f6nderimini g\u00f6stermektedir:<\/p>\n
\nimport { Server } from 'socket.io';\n\nconst handler = (req, res) => {\n  if (!res.socket.server.io) {\n    console.log('Yeni socket.io sunucusu ba\u015flat\u0131l\u0131yor...');\n    const io = new Server(res.socket.server);\n    res.socket.server.io = io;\n\n    io.on('connection', (socket) => {\n      console.log('Bir kullan\u0131c\u0131 ba\u011fland\u0131:', socket.id);\n\n      socket.on('mesaj', (mesaj) => {\n        console.log('Al\u0131nan mesaj:', mesaj);\n        io.emit('mesaj', mesaj); \/\/ T\u00fcm kullan\u0131c\u0131lara mesaj\u0131 yay\u0131nla\n      });\n\n      socket.on('disconnect', () => {\n        console.log('Bir kullan\u0131c\u0131 ba\u011flant\u0131s\u0131 kesildi:', socket.id);\n      });\n    });\n  }\n  res.end();\n};\n\nexport default handler;\n<\/code><\/pre>\n
Bu kod, bir Socket.IO sunucusunu ba\u015flat\u0131r ve  mesaj<\/code>  adl\u0131 bir olay dinleyicisi ekler.  Kullan\u0131c\u0131lar mesaj g\u00f6nderdi\u011finde,  sunucu bu mesaj\u0131 t\u00fcm ba\u011fl\u0131 kullan\u0131c\u0131lara yay\u0131nlar.  Elbette, bu sadece basit bir \u00f6rnektir.  Daha geli\u015fmi\u015f uygulamalar i\u00e7in, kullan\u0131c\u0131 do\u011frulamas\u0131, \u00f6zel odalar ve daha fazlas\u0131 gibi ek \u00f6zellikler ekleyebilirsiniz.  Ayr\u0131ca, g\u00fcvenlik hususlar\u0131na dikkat etmeniz son derece \u00f6nemlidir.<\/p>\n
Son olarak, Next.js uygulaman\u0131zda soket ba\u011flant\u0131s\u0131n\u0131 kurmak i\u00e7in istemci taraf\u0131nda bir JavaScript kodu yazman\u0131z gerekecektir. Bu kod,  sunucuya ba\u011flanacak ve mesajlar\u0131 g\u00f6nderecek ve alacakt\u0131r.  \u00d6rnek bir istemci taraf\u0131 ba\u011flant\u0131s\u0131 \u015f\u00f6yle yap\u0131labilir:<\/p>\n
\nimport io from 'socket.io-client';\n\nconst socket = io();\n\nsocket.on('connect', () => {\n  console.log('Sunucuya ba\u011fl\u0131!');\n});\n\nsocket.on('mesaj', (mesaj) => {\n  console.log('Al\u0131nan mesaj:', mesaj);\n});\n\nsocket.emit('mesaj', 'Merhaba sunucu!');\n<\/code><\/pre>\n
Performans ve \u00d6l\u00e7eklenebilirlik \u0130pu\u00e7lar\u0131<\/h2>\n
Uygulaman\u0131z b\u00fcy\u00fcd\u00fck\u00e7e, performans ve \u00f6l\u00e7eklenebilirlik \u00f6nemli hale gelir.  Bunu sa\u011flamak i\u00e7in birka\u00e7 ipucu:<\/p>\n