Ana Sayfa
Java Script
Node.js

Socket.IO Kurulumu ve İlk Proje

Socket.IO Kurulumu ve İlk Proje

Socket.IO Kurulumu ve İlk Proje

Socket.IO kurulumu ve ilk proje oluşturulması, gerçek zamanlı web uygulamaları geliştirmek isteyen yazılımcılar için temel bir adımdır. Socket.IO, hem sunucu hem istemci tarafında çalışan ve WebSocket teknolojisinin kolayca kullanılmasını sağlayan popüler bir JavaScript kütüphanesidir. Bu yazıda adım adım Socket.IO kurulumu ve basit bir ilk Socket.IO projesi nasıl oluşturulur öğrenebilirsiniz.

Socket.IO Nedir ve Avantajları Nelerdir?

Socket.IO, gerçek zamanlı, iki yönlü ve olay tabanlı iletişim kurmak için kullanılan bir kütüphanedir. WebSocket desteği sunar, ancak tarayıcı veya ağ kısıtlamalarında otomatik olarak long-polling gibi farklı protokollere geri dönebilir. Özellikle anlık mesajlaşma, canlı bildirimler veya online oyunlar gibi uygulamalarda yaygın şekilde kullanılmaktadır.

Socket.IO Nasıl Kurulur?

Node.js ve npm Gereksinimleri

Socket.IO kullanabilmek için önce Node.js ve npm (Node Package Manager) bilgisayarınızda kurulu olmalıdır. Kontrol için aşağıdaki komutları çalıştırabilirsiniz:

node -v
npm -v

Eğer Node.js kurulu değilse Node.js resmi sitesinden kolayca kurabilirsiniz.

Socket.IO Sunucu Kurulumu

Projenizin klasöründe terminali açıp aşağıdaki komutu yazarak Socket.IO ve Express kütüphanelerini yükleyin:

npm init -y
npm install express socket.io

Socket.IO ile İlk Proje Oluşturma

Sunucu Kodu (server.js)

Aşağıda Socket.IO ile hızlı bir şekilde çalışan bir Node.js sunucusu örneği verilmiştir:

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

const app = express();
const server = http.createServer(app);
const io = new Server(server);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('Yeni bir kullanıcı bağlandı');
  socket.on('mesaj', (msg) => {
    io.emit('mesaj', msg);
  });
});

server.listen(3000, () => {
  console.log('Sunucu 3000 portunda çalışıyor');
});

İstemci Kodu (index.html)

Socket.IO istemcisi olarak index.html dosyanıza şu kodları ekleyebilirsiniz:

<!DOCTYPE html>
<html>
  <head>
    <title>Socket.IO Kurulumu ve İlk Proje</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <ul id="messages"></ul>
    <form id="form" action="">
      <input id="input" autocomplete="off" />
      <button>Gönder</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      var socket = io();
      var form = document.getElementById('form');
      var input = document.getElementById('input');
      var messages = document.getElementById('messages');
      form.addEventListener('submit', function(e) {
        e.preventDefault();
        if (input.value) {
          socket.emit('mesaj', input.value);
          input.value = '';
        }
      });
      socket.on('mesaj', function(msg){
        var item = document.createElement('li');
        item.textContent = msg;
        messages.appendChild(item);
        window.scrollTo(0, document.body.scrollHeight);
      });
    </script>
  </body>
</html>

Sonuç: Socket.IO ile Gerçek Zamanlı Başlangıç

Socket.IO kurulumu ve ilk proje ile ilgili bu temel örnek, çok daha büyük ve karmaşık gerçek zamanlı uygulamalar için ilk adımdır. Socket.IO’nun sunduğu hızlı entegrasyon ve esnek protokol desteği sayesinde, canlı chat, bildirim ve anlık veri aktarımı gereken tüm projelerde rahatlıkla kullanılabilir. Şimdi kendi Socket.IO projenizi geliştirmeye başlayabilirsiniz!

Yorum Gönder