Oyun üzerinde aslında gerekli işlemlerin çoğu bitti. Bizim kullanıcıları oynatmamız gerekiyor. Bunu ise WebSocket kullanarak yapmayı düşünüyorum.
WebSocket'i kullanmak için oldukça iyi bir kütüphane olan socket.io kütüphanesini kullanacağız. Socket.io gelişmiş bir kütüphane ve oldukça geniş bir topluluğu var.
Projemize Socket.io kuralım:
npm i socket.io --save
Socket.io hakkında yazılmış çok kaynak var. 2015 yılında bir chat uygulaması yazıyorken çok bakmıştım. Kendi öğretici sayfasında bile bir chat uygulaması var.
Biz bu bölümde sadece uygulamamıza socket.io bağlantısını anlatacağız. Yukarıda bahsedilen yapının oluşturulması uzun sürebilir.
socket.io'yu express üzerinde çalıştırma gibi seçeneklerimiz var fakat bu konuda birkaç tereddütüm olduğu için biraz uzak durmayı seçtim. Biz socket.io'yu 3001 portundan çalıştıracağız. İlk önce server/socket dizinini oluşturalım ve içine index.js adında bir dosya oluşturalım. server/socket/index.js dosyasına şunları yazalım:
class Connector {
constructor() {
this.io = null;
}
// connector'ü başlatmak için
init(io) {
this.io = io;
this.connect();
}
// listenerlar burada yer alacak
connect() {
this.io.on('connection', function(socket){
console.log('bir kullanıcı bağlandı');
socket.on('disconnect', function(){
console.log('bir kullanıcı koptu');
});
});
}
}
module.exports = new Connector();
Biz bu kütüphaneyi dahil edip init değerine bir socket.io değeri atarsak, tüm işlemleri artık bu Connector'a devretmiş olacağız. Şimdi bu sınıfı server/uses.js dosyasında kullanalım. Bunun için server/users.js dosyasını şu şekilde düzenleyelim:
...
const socket = require('socket.io');
const Connector = require('./socket');
module.exports = (app) => {
...
// şu an için 3001 portunda çalışacak
Connector.init(socket(3001));
}
Şimdi sunucumuzu başlatalım:
npm run start:server
Bağlanıp bağlanmadığını test etmek için herhangi bir html dosyası oluşturalım ve içine şunları yazalım:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Socket Test</title>
</head>
<body>
<div id="result">Bağlantı Yok</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.slim.js"></script>
<script>
var socket = io('http://localhost:3001');
socket.on('connect', function () {
document.getElementById('result').innerHTML = "Bağlandı";
})
</script>
</body>
</html>
Bu sayfayı çalıştırdığımızda "Bağlandı" Yazısını ve başlattığımız sunucumuzda "bir kullanıcı bağlandı" yazısını görüyorsak işlem tamamdır.
Bu haftaki bölüm bu kadardı. Diğer hafta dinamik bir yapı kurmak ve görüşmek üzere. Kendinize iyi bakın :)
Düşündüklerin nedir ?
Yorumlar ({{totalCommentCount}})
{{commentLike165Count}} beğenme 3 yıl önce