Socket.io nedir?
Socket.IO, tarayıcı ile sunucu arasında gerçek zamanlı(real time), çift yönlü(bidirectional) ve olaya dayalı(event based) iletişimi sağlayan bir Javascript kütüphanesidir.
Bir proje oluşturup socket.io yu kullanalım. Boş bir dizinde;
komutunu çalıştırın ve projeniz için package.json oluşturun.
Ardından gerekli kütüphaneleri yükleyelim
Scoket.io nun çalışması için illa express serverine ihtiyac yoktur Node nin kendi http serveri ile de çalışır.
ama biz uygulamamızda express kullanacağiz.
index.js dosyamızı proje dizininde oluşturduktan sonra devam edelim
index.js
Şimdi render ettiğimiz sayfamızı hazırlayalım
/views/index.pug
Sayfamış şu şekilde görüncek
"connection" eventinin yanında her soketin bir de "disconnect" eventi vardır.
Socket.io istediğiniz veriyi istediğiniz şekilde gönereceğiniz kişiye atmakla sorumludur. Bunu yaparken binary dosyalarını da destekler. Şimdi kullanıcı her mesaj yazdığında mesajı servera gönderelim. Bunu yaparken Jquey kullanacağımız için sayfamıza jqueyi dahil edelim.
şimdi bu eventi yakalaycak index.js de bi event oluşturalım.
index.js
Güzel. Şimdi bu gelen mesajı bağlı tüm kullanıcılara atmamız lazım. Soclet.io da tamda işimize yarar bir fonsksyon var. io.emit().
index.js
Şimdi bunu yakalayacak clientde bir fonksyonuzmuz eksik. Hemen yazalım.
Socket.IO, tarayıcı ile sunucu arasında gerçek zamanlı(real time), çift yönlü(bidirectional) ve olaya dayalı(event based) iletişimi sağlayan bir Javascript kütüphanesidir.
Bir proje oluşturup socket.io yu kullanalım. Boş bir dizinde;
Kod:
[FONT="Courier New"]npm init[/FONT]Ardından gerekli kütüphaneleri yükleyelim
Kod:
[FONT="Courier New"]npm install --save express socket.io pug socket.io-client[/FONT]Scoket.io nun çalışması için illa express serverine ihtiyac yoktur Node nin kendi http serveri ile de çalışır.
Kod:
[font=monospace][color=#008000][b]var[/b][/color] app [color=#666666]=[/color] require([color=#BA2121]'http'[/color]).createServer(handler)
[color=#008000][b]var[/b][/color] io [color=#666666]=[/color] require([color=#BA2121]'socket.io'[/color])(app);
[color=#008000][b]var[/b][/color] fs [color=#666666]=[/color] require([color=#BA2121]'fs'[/color]);
app.listen([color=#666666]80[/color]);
[color=#008000][b]function[/b][/color] handler (req, res) {
fs.readFile(__dirname [color=#666666]+[/color] [color=#BA2121]'/index.html'[/color],
[color=#008000][b]function[/b][/color] (err, data) {
[color=#008000][b]if[/b][/color] (err) {
res.writeHead([color=#666666]500[/color]);
[color=#008000][b]return[/b][/color] res.end([color=#BA2121]'Error loading index.html'[/color]);
}
res.writeHead([color=#666666]200[/color]);
res.end(data);
});
}
io.on([color=#BA2121]'connection'[/color], [color=#008000][b]function[/b][/color] (socket) {
socket.emit([color=#BA2121]'news'[/color], { hello[color=#666666]:[/color] [color=#BA2121]'world'[/color] });
socket.on([color=#BA2121]'my other event'[/color], [color=#008000][b]function[/b][/color] (data) {
console.log(data);
});
});
[/font]ama biz uygulamamızda express kullanacağiz.
index.js dosyamızı proje dizininde oluşturduktan sonra devam edelim
index.js
Kod:
[font=monospace][color=#008000][b]const[/b][/color] app [color=#666666]=[/color] require([color=#BA2121]'express'[/color])();
[color=#008000][b]const[/b][/color] server [color=#666666]=[/color] app.listen([color=#666666]80[/color], () => {
console.log([color=#BA2121]"Chat server başladı"[/color]);
})
[color=#008000][b]const[/b][/color] io [color=#666666]=[/color] require([color=#BA2121]"socket.io"[/color]).listen(server); [color=#408080][i]// socket.io yu express serverine bağladık
[/i][/color]
[color=#408080][i]// Pug template engine kullancağmızı belirttik
[/i][/color]app.set([color=#BA2121]'view engine'[/color], [color=#BA2121]'pug'[/color]);
app.get([color=#BA2121]'/chat'[/color], (req, res) => {
res.render([color=#BA2121]'index'[/color], {
title[color=#666666]:[/color] [color=#BA2121]"Chat!"[/color]
})
})
[color=#408080][i]//ilk eventimizi yazalım
//Client servera ilk bağlandığında "connection" eventine
//kendi socket objesini gönderir
[/i][/color]io.on([color=#BA2121]"connection"[/color], (socket) => {
console.log([color=#BA2121]"Biri bağlandı"[/color]);
})
[/font]Şimdi render ettiğimiz sayfamızı hazırlayalım
/views/index.pug
Sayfamış şu şekilde görüncek
"connection" eventinin yanında her soketin bir de "disconnect" eventi vardır.
Kod:
[font=monospace]io.on([color=#BA2121]"connection"[/color], (socket) => {
console.log([color=#BA2121]"Biri bağlandı"[/color]);
socket.on([color=#BA2121]"disconnect"[/color], () => {
console.log([color=#BA2121]"Biri ayrıldı"[/color]);
})
})
[/font]Socket.io istediğiniz veriyi istediğiniz şekilde gönereceğiniz kişiye atmakla sorumludur. Bunu yaparken binary dosyalarını da destekler. Şimdi kullanıcı her mesaj yazdığında mesajı servera gönderelim. Bunu yaparken Jquey kullanacağımız için sayfamıza jqueyi dahil edelim.
şimdi bu eventi yakalaycak index.js de bi event oluşturalım.
index.js
Kod:
[font=monospace]io.on([color=#BA2121]"connection"[/color], (socket) => {
console.log([color=#BA2121]"Biri bağlandı"[/color]);
socket.on([color=#BA2121]'chat message'[/color], (data) => {
console.log([color=#BA2121]"Biri mesaj gönderdi: "[/color] [color=#666666]+[/color] data);
})
socket.on([color=#BA2121]"disconnect"[/color], () => {
console.log([color=#BA2121]"Biri ayrıldı"[/color]);
})
})
[/font]Güzel. Şimdi bu gelen mesajı bağlı tüm kullanıcılara atmamız lazım. Soclet.io da tamda işimize yarar bir fonsksyon var. io.emit().
index.js
Kod:
[font=monospace]io.on([color=#BA2121]"connection"[/color], (socket) => {
console.log([color=#BA2121]"Biri bağlandı"[/color]);
socket.on([color=#BA2121]'chat message'[/color], (data) => {
console.log([color=#BA2121]"Biri mesaj gönderdi: "[/color] [color=#666666]+[/color] data);
[color=#408080][i]//Bütün herkese bu mesajı gönderelim.
[/i][/color] io.emit([color=#BA2121]'chat message'[/color], data);
})
socket.on([color=#BA2121]"disconnect"[/color], () => {
console.log([color=#BA2121]"Biri ayrıldı"[/color]);
})
})
[/font]Şimdi bunu yakalayacak clientde bir fonksyonuzmuz eksik. Hemen yazalım.
Son düzenleme:
