Basit Bir Sohbet Uygulamas\u0131 \u00d6rne\u011fi<\/p>\n
Bu makalede, basit bir ger\u00e7ek zamanl\u0131 sohbet uygulamas\u0131 \u00f6rne\u011fini ad\u0131m ad\u0131m inceleyece\u011fiz. \u00d6rnek uygulama, temel HTML, CSS ve JavaScript kullanarak olu\u015fturulmu\u015ftur. Bu uygulama, daha b\u00fcy\u00fck ve karma\u015f\u0131k sohbet uygulamalar\u0131 i\u00e7in temel bir yap\u0131 ta\u015f\u0131 g\u00f6revi g\u00f6r\u00fcr. \u00d6ncelikle, uygulaman\u0131n temel aray\u00fcz\u00fcn\u00fc olu\u015fturaca\u011f\u0131z. Ard\u0131ndan, JavaScript kullanarak istemci taraf\u0131ndaki i\u015flemleri ele alaca\u011f\u0131z. Son olarak, ger\u00e7ek zamanl\u0131 ileti\u015fim i\u00e7in bir WebSocket ba\u011flant\u0131s\u0131 kuraca\u011f\u0131z.<\/p>\n
\u00d6ncelikle, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc olu\u015fturmak i\u00e7in basit bir HTML yap\u0131s\u0131 kullanaca\u011f\u0131z. Bu yap\u0131, mesaj giri\u015f alan\u0131, mesaj g\u00f6nderme butonu ve mesajlar\u0131n g\u00f6r\u00fcnt\u00fclendi\u011fi bir b\u00f6l\u00fcm\u00fc i\u00e7erecektir. A\u015fa\u011f\u0131da, aray\u00fcz i\u00e7in kullan\u0131labilecek basit bir HTML \u00f6rne\u011fi verilmi\u015ftir:<\/p>\n
\n<div id=\"chatbox\"><\/div>\n<input type=\"text\" id=\"message\" placeholder=\"Mesaj\u0131n\u0131z\u0131 yaz\u0131n...\">\n<button id=\"send\">G\u00f6nder<\/button>\n<\/code><\/pre>\nBu HTML kodunda, mesajlar\u0131n g\u00f6r\u00fcnt\u00fclenece\u011fi chatbox adl\u0131 bir div, mesaj yazmak i\u00e7in bir input alan\u0131 ve mesaj\u0131 g\u00f6ndermek i\u00e7in bir button bulunmaktad\u0131r. Daha sonra, CSS kullanarak bu elemanlar\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc \u00f6zelle\u015ftirebiliriz. \u00d6rne\u011fin, chatbox’\u0131n mesajlar\u0131 g\u00f6stermek i\u00e7in uygun bir stil verilebilir.<\/p>\n
JavaScript ile \u0130stemci Taraf\u0131 \u0130\u015flemleri<\/h2>\n
\u015eimdi, JavaScript kullanarak istemci taraf\u0131ndaki i\u015flemleri ele alal\u0131m. Bu k\u0131s\u0131mda, kullan\u0131c\u0131n\u0131n yazd\u0131\u011f\u0131 mesaj\u0131 al\u0131p, sunucuya g\u00f6nderece\u011fiz ve sunucudan gelen mesajlar\u0131 ekranda g\u00f6r\u00fcnt\u00fcleyece\u011fiz. A\u015fa\u011f\u0131da, JavaScript kodunun temel yap\u0131s\u0131 g\u00f6sterilmi\u015ftir. Bu kod, WebSocket ba\u011flant\u0131s\u0131 kurmay\u0131 ve mesaj g\u00f6nderme\/alma i\u015flemlerini kapsar:<\/p>\n
\n\/\/ WebSocket ba\u011flant\u0131s\u0131 kur\nconst socket = new WebSocket('ws:\/\/localhost:8080'); \/\/ Sunucu adresini de\u011fi\u015ftirmeniz gerekebilir\n\n\/\/ Mesaj g\u00f6nderme fonksiyonu\ndocument.getElementById('send').addEventListener('click', () => {\n const message = document.getElementById('message').value;\n socket.send(message);\n});\n\n\/\/ Mesaj alma fonksiyonu\nsocket.onmessage = (event) => {\n const message = event.data;\n \/\/ Mesaj\u0131 chatbox'a ekle\n};\n<\/code><\/pre>\n