Socket.io Bağlantısını Kurma - NOY#7

Kategoriler

Socket.io Bağlantısını Kurma - NOY#7

6 yıl önce 1 yorum

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.

Bizim socket.io ile yapmamız gereken ne olacak?

Uygulamaya giren her oyuncu websocket adresimize bağlanacak.
Uygulamada kaldığı süreç boyunca sunucuya bağlı tutulacak
Bir oyun oynamak istediğinde ilk önce http ile hazırladığımız api methoduna istek atacak.
Attığı "boşta kişi var mı?" isteğine bir kontrol yazılacak.
Bu sistem aynı şekilde yine oyun aramaya giren her kişi için çalışacak.

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.

O zaman işe koyulalım

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 :)