Merhaba bu yazımda ağ programlama olarak bildiğimiz socket’in artık web tarafındada münkün olduğuna deyineceğiz. Bildiğiniz üzere soketler özetle bir portu dinler ver oradan cvp beklerler veya o porta mesaj yollarlar. Clientlarda servera port açarsak, clienttan mesajı servera yollarız server da hedef clientın dinlediği porta mesajı alır.
Sosyal medyanın popüler olması ile birlikte, anlık veri akışına (real-time) alışır duruma geldik. Özellikle sosyal ağda bildirimlerin yansıtılması için eski yöntem olan sayfayı yenilemek hemen hemen tarih oldu . Facebook , twitter vs. gibi siteler bu işi nasıl başarıyora gelirsek bu yöntemlerden en bilineni WebSocket’tir. HTML5 ile birlikte gelen bu teknoloji dev şirketler tarafından desteklenip , sistemlerine entegre ediyorlar.
WebSocket fonksiyonlarından kısaca bahsedelim ve javada nasıl kullanıyor küçük bir chat uygulaması yapalım.
onOpen : Websocket bağlantısı istemci ile sunucu arasında gerçekleştiği sırada bu fonksiyon çalışır. Burada kullanıcının sisteme bağlantı esnasında yapılması gerekenler yapılabilir.Bir class’ın yapılandırıcısı gibi düşünebilirsiniz.
onClose: Websocket bağlantısı kesildiği zaman yani kullanıcı server ile bağlantısını kestiği zaman bu fonksiyon çalışır.
onMessage: Servera websocket aracılığı ile mesajın gelmesi durumunda çalışacak olan fonksiyondur. Gelen mesaj hedef usera burada gönderilebilir.
onError: Serverde karşılaşan hataların return olacağı fonksiyondur.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script> // Sunucuya ulaşacağımız connection bilgilerini // giriyoruz ve bağlanmaya çalışıyoruz. var webscoket= new WebSocket('ws://localhost:8000'); webscoket.onopen = function () { webscoket.send("Javascript tarafindan mesaj!"); }; webscoket.onmessage = function (message) { console.log(message.data); }; webscoket.onerror = function (error) { // Bir hata çıktığında çalışacak kısım! }; </script> |
Websocket hakkında biraz olsada bilgimiz olduğuna göre Java’da uygulamamızı yazmaya başlayalım .Yapacağımız uygulama chat uygulaması public bir chat uygulaması olacak tüm istemciler birbirinin yazdığı mesajları görebilecek.
İlk önce java sınıfımızı yazalım ve sunucumuzu hazır edelim ki herhangibir arayüzden yazdığımız websocketimize ulaşılabilsin.
WebSocketServer.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
package io.bilisim; import java.io.IOException; import java.io.StringWriter; import java.util.Collections; import java.util.HashSet; import java.util.Iterator; import java.util.Set; import javax.json.Json; import javax.json.JsonObject; import javax.json.JsonWriter; import javax.websocket.EncodeException; import javax.websocket.OnClose; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.server.ServerEndpoint; /** * * @author mehmetkilic */ //Bu notasyon websocketimizi hangi path'in altında olduğunu belirtiyor //Zaten websocket url'ine ulaşırken bunu domain isminden sonra yazıyoruz. @ServerEndpoint("/chat") public class WebSocketServer { // Gelen Tüm istemcileri saklayabilmek için Session listesi oluşturuyoruz private static final Set<Session> istemciler = Collections.synchronizedSet(new HashSet<Session>()); @OnOpen public void onOpen(Session session) { // WebSocket'ten gelen tüm istemciler ilk buraya düşer // ve burada oluşturduğumuz Session listemize ekliyoruz istemcileri istemciler.add(session); } @OnMessage public void onMessage(String message, Session client) throws IOException, EncodeException { String username = (String) client.getUserProperties().get("username"); //Bu fonksiyonuzda socket'ten gelen isteği yani business'ımızı aslında burada yönetilyoruz //Kodumuza gelirsek burada ilk önce gelen istemci'nin session'u varmı diye bakıyoruz //yoksa eğer (getUserProperties()) metoduna o gelen istemciyle alakalı tutabileceğimiz // tüm dataları atabiliyoruz bunu şöyle düşünün şuan açtığınız bu tarayıcı ile // bu metoda düştüğünüzü düşünün bu metod size özel bir username (ahmet) atadı session bilgileriniz uniqe // olduğu için sizden gelen her istek için bilicekki sınıfımız sizin 'username' tag'ında bulunan değer ahmet'tir. //Burada username null dan farklı ise getBasicRemote().sendText(); metodu ile client'a (istemciye) set ettiğimiz // dataları return ediyor if (username == null) { client.getUserProperties().put("username", message); String test1 = "Admin => bağlanan kullanıcı : " + message; client.getBasicRemote().sendText(test1); } else { Iterator<Session> iterator = istemciler.iterator(); while (iterator.hasNext()) { String test = username + " : " + message; iterator.next().getBasicRemote().sendText(test); } } } @OnClose public void onClose(Session session) { // WebSocket'ten gelen tüm istemciler OnOpen sonrasında OnMessage düşer // daha sonrasında ise onClose notasyonunda bulunan metoda düşer. istemciler.remove(session); } } |
Şimdi ise sunucumuzu deploy ettiğimizde sayfamızı nasıl tetikliyeceğimizi yapalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> </head> <body style="background: burlywood">" <meta charset="utf-8"> <title>www.turkishh.com Web Socket Ornegi</title> <script type="text/javascript"> <!-- Uygulamamızı deploy ettiğimizde websocket url'miz bu şekilde oluşacaktır.webservis url'i gibi :)--> var wsUri = "ws://localhost:8080/WebSocketExamle/chat"; <!-- Servise bağlanmaya çalışıyoruz --> websocket = new WebSocket(wsUri); websocket.onmessage = function processMessage(message) { <!-- Socketten gelen değeri elementimize setliyoruz --> textArea.value += message.data+ "n"; }; function sendMessage() { <!-- Sockete requestimizi yolluyoruz --> websocket.send(messageText.value); messageText.value = ""; } </script> <h2 style="text-align: center;">WebSocket Test [www.bilisim.io]/<h2> <br></br> <div style="text-align: center;"> <form action=""> <textarea id="textArea" readonly="true" rows="20" cols="100"></textarea><br> <input id="messageText" style="text-align: left; width: 610px;" name="message" value="isminizi giriniz..." type="text"> <input style="text-align: left; width: 200px;" onclick="sendMessage()" value="Gönder" type="button"> </form> </div> <div id="output"></div> </body> </html> |
Test ederken farklı tarayıcı segmelerinden giriş yaparsanız neler olduğunuz göreceksiniz ?
Ekran çıktımız :
İyi Çalışmalar