Express ile socket io

By: Admin Person
2019-01-03 22:48:00

Normalde socket uygulamarın da nodejs http modulu ile yapılan pek çok örnek mevcut. Bu sayfa da çok basit bir şekilde express ile bir http server oluşturup socket bağlantısı oluşturacağım.

Normalde konu dışı olsa da express de router ile küçük örneklerde bulunmakta.

Socket uygulaması iki taraflı olur, ilk önce server oluşturur kullanıcıları size nerden hangi port numarası ile bağlanacağını, kullanıcıların hangi olaylarını dinlemek istediğiniz gibi diğer kodlarınızı yazarsınız. Server oluşturduğunuz da bu servera bağlanıp iletişim halinde olacak birde client uygulaması yazarsınız, bu client uygulamasını sitenizin kendisi olabilir.

İlk olarak server oluşumu socket ayarları ve kullanıcı methodlarını oluşturacağım, daha sonra client olarakta gene bir kod paylaşacağım.

server

İlk adım olarak require ile oluşturduğumuz uygulama örneklerini bir birleri ile nasıl ilişkilendirdiğimizin bir kod örneği:

const app = require("express")();
const server = require('http').Server(app)
const io = require("socket.io").listen(server);
const port = 3000;

Şuanda server listen methodunu port parametremiz ile çalıştırsak http server ayağa kalkıp çalışmaya başlayacaktır, fakat connetion, disconnect gibi methodlarımız daha tanımlamadık.

io.sockets.on('connection', function (socket) {
    //kullanıcı sitemize erişti ve client tarafında yazdığımız socket baglantısı sayesinde bize connect oldu
    console.log("socket Connected");

    //kullanıcı sitemizden ayrıldı, kapattı veya neti koptu vs..
    socket.on("disconnect", function () {
        console.log("socket Disconnected");
        //burda kullanıcı sayfanızdan çıktıktan sonra yapmak istediklerinizi yapabilirsiniz
    });

    //client tarafindan message isimli bir event bekliyoruz
    socket.on("message", function (data) {
        //kullanıcı mesaj gönderdiğinde ilk once ona tekrar gönderiyoruz. emit 
        socket.emit("show-message", 'senin mesajın:'+data);

        //daha sonra kullanıcın mesajını sitemizde bagli olan tum kullanicilara gonderiyoruz //broadcast.emit
        socket.broadcast.emit("show-message", data);
    });

    //client tarafindan idCneection isimli bir event bekliyoruz. 
    //Bir kullanici kendi gibi diger baska bir kullaniciya mesaj gonderemek için
    //jsn isimli paramaetre json ve iceriginde degerler:
    // id: hedef kullanici socket.id degeri
    // selfid: kendi socket id degeri
    // message: id ile gelen hedef kullaniciya gonderilecek mesaj
    socket.on("idCneection", function (jsn) {
        io.to(jsn.id).emit("privatemessage", jsn.message);
        io.to(jsn.selfid).emit("privatemessage", "sen:"+jsn.message);
        console.log(jsn);
    });

});

Yukardaki kod örneklerinde on ve emit nedir bilmiyor iseniz on client(kullanici) dan bize gelen, emit ise bizden client tarafina giden olarak düşünebilirsiniz. Birazdan client kodlarını paylaştığım da yukardaki tüm emit işlemleri için client kod bütünün de bir on methodu göreceksiniz. Yani aynı şekilde client tarafı da server kodumuzun içerisindeki her on işlemi icin bir emit, her emit işlemi için de bir on methodu içeriyor olacak.

express ile url adresleri oluşturmak için alttaki gibi router lar tanımlayabiliriz

//bu ilk ana sayfamiz
app.get("/", function (req, res) {
    console.log("home page");
    res.send("main");
} );

//buda http://127.0.0.1:3000/user seklinde erişilen url adresimiz
//client islemlerini ornek amacli bu url altinda yapiyorum.
//server.html isimli statik bir dosya gonderiyorum
app.get("/user", (req, res) =>  {
    console.log("User page");
    res.status(200).set('Content-Type', 'text/html');
    res.sendFile(
        __dirname+"/server.html",
    );
} );

Bütün bunlardan sonra server dinleme işlemi için

server.listen(port, () => console.log(`Example app listening on port ${port}!`))

Yukardaki kod parçalarını aynı sıra ile server.js isimli bir dosya da bütünleyin.

Bu opsiyonel bir seçim, eğer nodemon kurulu değil ise ilk öncelikle onu kurun
npm install -g nodemon

nodemon siz server.js içerisinde değişiklik yaparsanız serveri otomatik olarak refresh yapar.

nodemon kurduysanız server.js dosyanızı terminalden

nodemon server.js

olarak çağırabilirsiniz. nodemon kurmadıysanızi

node server.js

olarak çağırın

express ile bir server kurmuş ve socket uygulamamızı en basit hali ile ayağa kaldırmış olduk.

client

server.html:

<!DOCTYPE html>
<html>
<head>
    <title>Socket.io Sample</title>
</head>
<body>

<input id="ns" type="text" placeholder="ns">
<input id="nstext" type="text" placeholder="ns message">
<input id="nssubmit" type="submit">

<input id="text" type="text" placeholder="global message">
<input id="submit" type="submit">

<ul id="list" style="width:350px; overflow: auto; float: left; max-height: 200px;">
</ul>

<div id="privatemessage" style="width: 500px; background-color: cadetblue; float: right; min-height: 150px;"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script>
    "use strict";

    $(document).ready( () => {

        var x = location.hostname;
        var socket = io.connect("http://"+x+":3000");

        $('#submit').click( () => {
            socket.emit('message', $('#text').val()+" NS: "+ socket.id);
            $('#text').val('');
        });
        $('#nssubmit').click( () => {
            socket.emit("idCneection", {selfid:socket.id, id:$('#ns').val(), message:$('#nstext').val()});
            $('#text').val('');
        });
        socket.on('show-message', (text) => {
            $('#list').append('<li>' + text + '</li>');
        });

        socket.on("privatemessage",function (data) {
            $("#privatemessage").append('<p>'+data+'</p>');
        })

    });
</script>
</body>
</html>

Normalde server.js local bir şekilde up ettiğinizi düşünerek html dosyasında alttaki gibi bir connection yaptım

var x = location.hostname;
var socket = io.connect("http://"+x+":3000");

Eğer siz server.js ip adresiniz ve port numaranız farklı ise x yerine kendi ip adresinizi ve 3000 yerine de server.js içerisindeki port değerini yazınız.

daha sonra http://127.0.0.1:3000/user adresini tarayıcınız ile çağırabilirsiniz.