Socket IO Nedir ? Socket io chat ekranı yapımı

Bu yazımızda bir nodeJS paketi olan socket io ‘yu inceleyeceğiz ve birlikte socket io ile basit bir chat ekranı yapmaya çalışacağız . Öncelikle nodeJS , socket-io , server ve client hakkında biraz bilgi edinelim.

Server (Sunucu) Nedir ?

Server , sunucu/istemci mimarisinde verilen bilgileri saklayan ve istenildiği zaman erişilebilinen bir depodur .

Client (İstemci) Nedir ?

Client sunucu/istemci mimarisinde server’dan istekte bulunan ve server’a bilgi taşıyan ve serverdan aldığı request(yanıt)’ları taşıyan bir aracı olarak tanımlayabiliriz.

client-server mimarisi

Yukardaki görseli açıklayacak olursak örneğin ; herhangi bir web sitesine girdiğimiz zaman Client(istemci), Server(sunucu) ‘a bir sorgu gönderir. Daha sonra Server(sunucu) gelen sorguya göre bize bir sonuç verir ve istemci yanıtı bize gösterir.

nodejs logo

NodeJS Nedir ?

Node.js ücretsiz ve açık kaynak olarak sunucu taraflı geliştirilen bir framework yapısıdır . Sunucu kısmında javaScript’i kullanan node.js ile web projeleri geliştirebilirsiniz .

node js – socket io

Socket-IO Nedir ?

Socket-IO bir node.js paketidir. NodeJS üzerinde geliştirilen bu kütüphane istemci/sunucu bağlantısının yanı sıra oturum yönetimi ve mesaj alışverişi gibi konularda da oldukça kolaylık sağlar . Belirli bir port üzerinden açılmış bağlantının istemci tarafından dinlenmesi ve paket alışverişi mantığına dayanan bu kütüphane bir kaç satır kodla bile chat uygulaması yapımına olanak sağlar.

Socket-IO kurulumu

Öncelikle NodeJS ‘ in bilgisayarınızda kurulu olduğuna emin olun eğer kurulu değil ise buradan indirebilirsiniz . Kurulumu yaptıktan sonra cmd(Konsol Ekranı)’ yi açarak node -v komutu ile kurulumun yapıldığından emin olabilirsiniz.

Daha sonra masaüstünde veya herhangi bir dizinde chat-example adında bir klasör oluşturun ve socket-io modülünü kurmak için cmd ekranına aşağıdaki komutu giriniz.

npm install socket.io
veya
npm install socket.io --save

Daha sonra dizininize index.html adında bir html dosyası oluşturun ve aşağıdaki komutları yazın :

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font: 13px Helvetica, Arial;
      }
      form {
        background: #000;
        padding: 3px;
        position: fixed;
        bottom: 0;
        width: 100%;
      }
      form input {
        border: 0;
        padding: 10px;
        width: 90%;
        margin-right: 0.5%;
      }
      form button {
        width: 9%;
        background: rgb(130, 224, 255);
        border: none;
        padding: 10px;
      }
      #messages {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }
      #messages li {
        padding: 5px 10px;
      }
      #messages li:nth-child(odd) {
        background: #eee;
      }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Gönder</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
      $(function() {
        var socket = io();
        $("form").submit(function(e) {
          e.preventDefault();
          socket.emit("chat message", $("#m").val());
          $("#m").val("");
          return false;
        });
      });
    </script>
  </body>
</html>

Burada button tetiklendiği zaman socket.emit m id’li input içerisindeki veriyi yakalayarak veriyi server’a gönderir.Peki server’a ulaştığında ne olur. Hemen server.js dosyamızı aynı dizine oluşturalım ve aşağıdaki komutları yazalım.

server.js

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(request, response){
  response.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket){
    socket.on('chat message', function(msg){
      console.log('message: ' + msg);
    });
  });

http.listen(3000, function(){
  console.log('listening on:3000');
});

app.get()

Burada app.get fonksiyonunun aldığı 2 parametre var birinci parametre olan '/' gelen isteğin geldiği dizini belirtmektedir. ikinci parametre request(sorgu) ve response(yanıt) şeklinde 2 parametre alan bir fonksiyondur. Kısaca açıklamak gerekirse eğer http://localhost:3000/ portuna herhangi bir get sorgusu gelirse response(yanıt) index.html dosyasını gönderecektir.

io.on()

Yukarıda index.html dosyamızdan emit ettiğimiz veri buradaki bağlantı tarafından yakalanır ve on metodu içerisindeki işlemler yapılır. Burada console ekranına yazmışız.

Bu başlığımızda Socket-IO , NodeJS ve Server/Client mimarisi hakkında bilgi paylaştık .

Socket-IO hakkında daha detaylı bilgi için burayı ziyaret edebilirsiniz.
NodeJS hakkında daha detaylı bilgi için diğer yazılarımızı da buradan okuyabilirsiniz.

Emre Sualp

Kocaeli Üniversitesi Bilgisayar Mühendisliği 3. sınıf öğrencisiyim .Java , Javascript ve Android programlama ile ilgileniyorum.Bildiklerimi aktarmak ve yeni öğrendiğim konuları pekiştirmek için yazılarımı sizlerle paylaşacağım.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir