{"id":1200,"date":"2014-03-26T08:32:44","date_gmt":"2014-03-26T08:32:44","guid":{"rendered":"http:\/\/blog.jaringanhosting.com\/?p=1200"},"modified":"2014-03-26T09:09:11","modified_gmt":"2014-03-26T09:09:11","slug":"ajax-hosting-indonesia-aplikasi-chat-sederhana-menggunakan-ajax","status":"publish","type":"post","link":"https:\/\/blog.jaringanhosting.com\/index.php\/ajax-hosting-indonesia-aplikasi-chat-sederhana-menggunakan-ajax\/","title":{"rendered":"AJAX Hosting Indonesia JaringanHosting.com – Aplikasi Chat Sederhana Menggunakan AJAX"},"content":{"rendered":"

AJAX<\/a>\u00a0<\/strong>adalah singkatan dari\u00a0A<\/strong>synchronous\u00a0JavaScript\u00a0and XML. Pada dasarnya ajax menggunakan\u00a0XMLHttpRequest<\/strong>\u00a0object Javascript untuk membuat request ke server secara asynchronous atau tanpa melakukan refresh halaman website.
\nBerikut ini adalah aplikasi Chat sederhana untuk menunjukkan penggunaan XMLHttpRequest (AJAX<\/a>) di ASP.NET<\/a>. Ini adalah aplikasi chatting dimana komunikasi pada chat Antara satu dengan satu pengguna, tetapi nantinya dapat dengan mudah dikembangkan untuk mendukung pengguna multi -chatting juga.<\/p>\n

Jadi fungsi AJAXRequest () digunakan untuk mentransfer semua data antara browser dan server.
\nDalam aplikasi chat ini, beberapa bagian dari data (misalnya RequestCode, username, password) akan dikirim melalui header HTTP, dan beberapa data seperti pesan dan userlist dikirim dalam konten seperti biasanya.
\nAplikasi demo adalah sebuah aplikasi web ASP.NET. Menggunakan Microsoft SQL database untuk menyimpan pesan pengguna dan login pengguna.
\n\"drupal<\/a>Database. MDF termasuk dalam folder app_data, dan juga file “DatabaseScript.sql” berisi semua script database untuk setup database baru.\u00a0Saat ini, saya memiliki komentar kode untuk membuat history pesan dalam database disimpan prosedur, tetapi dapat diaktifkan jika seseorang ingin.
\nKomunikasi antara browser -> Server -> Browser dibuat dengan cara berikut:
\nClient (browser) mengirim permintaan bersama dengan RequestCode tersebut.
\nPermintaan kode parsing di server untuk menentukan request digunakan untuk apa. (Misalnya Login, Logout, SendMessage, ReceiveMessage, dll)
\n\"JaringanHosting.com\"<\/a> Server menangani permintaan, memprosesnya dan mengirimkan Response yang sesuai kembali bersama dengan data yang diminta.
\nKlien penerima mengirim pesan ke Server. Setelah Server memiliki pesan untuk penerima, pesan dikirim dalam respon dari server.
\nvar MessagePollingInterval = 3000 ; \/\/ Interval of polling for message
\nvar OLUsersPollingInterval = 9000; \/\/ Interval of polling for online users<\/code><\/p>\n

Ini adalah variabel yang memegang interval polling.
\nPesan dipertukarkan dari dan ke server dengan cara dienkripsi. Algoritma enkripsi \/ dekripsi yang digunakan dalam aplikasi ini adalah simple substitution cipher.
\nvar EncryptionKey = 3; \/\/Encryption Key: 0 to disable encryption<\/code>
\nIni memegang kunci enkripsi yang harus sama di klien dan server akhir.<\/p>\n

Berikut ini adalah fungsi enkripsi \/ dekripsi:
\nfunction Encrypt(PlainText, Key) {
\nvar to_enc = PlainText.toString().replace(\/^\\n+\/, \"\").replace\u00a0(\/\\n+$\/, \"\"); \/\/Nozel: remove \\n
\nvar xor_key=Key;
\nvar the_res=\"\";\/\/the result will be here
\nfor(i=0;i<to_enc.length;++i)
\n{
\n\/\/\/\/the_res += String.fromCharCode((xor_key ^ to_enc.charCodeAt(i)));<\/p>\n

\/\/Nozel: Xor Cipher .
\n\/\/But encoded characters are not always allowed in http headers<\/p>\n

if (to_enc.charCodeAt(i) <= 32) {
\n\/\/Keep c as it is
\nthe_res += String.fromCharCode((to_enc.charCodeAt(i))); \/\/Nozel: Bypass
\n\/\/Invalid characters which are not supported in Http headers
\n}
\nelse {
\nthe_res += String.fromCharCode
\n((to_enc.charCodeAt(i)) - Key); \/\/Nozel: Normal substitution Cipher
\n}
\n}
\nreturn(the_res);
\n}<\/p>\n

function Decrypt(CipherText, Key) {
\nvar to_dec = CipherText;
\nvar xor_key = Key;
\nvar PlainText = \"\";
\nfor (i = 0; i < to_dec.length; i++) {<\/p>\n

\/\/\/\/\/ PlainText += String.fromCharCode((xor_key ^ to_dec.charCodeAt(i)));
\n\/\/Nozel: Xor Cipher . But encoded characters are not always allowed in HTTP headers<\/p>\n

if (to_dec.charCodeAt(i) <= 32) {
\n\/\/Keep c as it is
\nPlainText += String.fromCharCode((to_dec.charCodeAt(i)));
\n\/\/Nozel: Bypass Invalid characters which are not supported in HTTP headers
\n}
\nelse {
\nPlainText += String.fromCharCode
\n((to_dec.charCodeAt(i)) + Key); \/\/Nozel: Normal substitution Cipher
\n}
\n}
\nreturn (PlainText);
\n}<\/code><\/p>\n

Sebuah fungsi yang sama diterapkan di kode C# dalam penangan sisi server untuk melakukan enkripsi \/ dekripsi.
\nBerikut ini adalah potongan kode bagaimana pesan dikirim melalui permintaan Ajax:
\nfunction SendMessage() {
\nif (ValidateSendMessageWindow()) {
\nvar URL = \"SecureChatServer.ashx\";
\nvar covert = \"False\";
\nif (URL == null) { alert(\"Request URL is Empty\"); }
\nelse {
\nHTMLmessage = document.getElementById('Message').value.toString().replace
\n(\/\\r\\n?\/g, '
');
\nmessage = Encrypt(HTMLmessage, EncryptionKey);
\nrecepient = Encrypt
\n(document.getElementById('Recepient').value, EncryptionKey);
\nAjaxRequest(ProcessSendMessageResponse, URL, \"POST\",
\n{Message:message , Recepient:recepient}, '', { RequestCode: 'SC005'});
\n\/\/.
\n\/\/.
\n\/\/.
\n}}}<\/code>
\nSemua data yang dibutuhkan akan diteruskan ke fungsi ‘AjaxRequest’ yang mengirimkan data ke handler generik ‘SecureChatServer.ashx’.<\/p>\n

Berikut adalah kode yang dieksekusi untuk RequestCode ini: SC005:<\/p>\n

LoggedInUser = userlogin.IsUserLoggedIn(SessionID, UserIPAddress);\r\nif (LoggedInUser != null) \/\/ Check is user is logged in\r\n{\r\nMessages newMessage = new Messages(); \/\/ Message Data Access Layer\r\nMessage = Decrypt(context.Request.Params[\"Message\"],\r\nEncryptionKey); \/\/ Extract the message data from the request and decrypt it.\r\nRecepient = Decrypt(context.Request.Params[\"Recepient\"],\r\nEncryptionKey); \/\/ Extract the recipient data from the request and decrypt it.\r\nif (newMessage.WriteMessage(LoggedInUser, Recepient,\r\nMessage)) \/\/Write the message to database through Message Data access layer\r\n{\r\ncontext.Response.AddHeader(\"CustomHeaderJSON\",\r\n\"ResponseStatus:'RS-OK'\"); \/\/add the Success indicator to the response header\r\n}\r\nelse\r\n{\r\ncontext.Response.AddHeader(\"CustomHeaderJSON\",\r\n\"ResponseStatus:'RS-Failed'\"); \/\/add the Failure indicator to the response header\r\n}...}<\/em>\r\n<\/em><\/em><\/pre>\n
Indikator keberhasilan \/ kegagalan respon baru ini ditambahkan dalam header HTTP dikirim kembali oleh server.
\nDan akhirnya setelah permintaan AJAX selesai, fungsi Handler dijalankan. Semua respon dari server tersedia dalam fungsi handler.
\nDalam hal ini, fungsi handler yang ditentukan adalah ‘ProcessSendMessageResponse’, dan berikut adalah definisinya:
\nfunction ProcessSendMessageResponse() {
\nvar ResponseStatus = GetHeader(ResponseHeaderJSON, 'ResponseStatus');
\nif (ResponseStatus == \"RS-OK\") {
\n\/\/.
\n\/\/.
\n\/\/.
\n}}<\/code><\/p>\n
Seperti yang Anda lihat, nilai ‘ResponseStatus’ diekstrak dari header HTTP Response yang sudah tersedia dalam fungsi. ‘ResponseHeaderJSON’ adalah sebuah string JSON, fungsi ‘getHeader’ digunakan untuk mengekstrak nilai tertentu di JSON String.
\nNilai ‘ResponseStatus’ kemudian diperiksa untuk memberitahukan Sukses \/ Gagal dalam mengirim pesan.
\nProses yang sama digunakan untuk semua fungsi seperti Menerima pesan, Login, Logout, daftar Users Online, dll
\nSebagian besar fitur UI seperti Window dragging, tooltips, smooth show\/hide, dll diimplementasikan menggunakan JQuery perpustakaan.<\/p>\n","protected":false},"excerpt":{"rendered":"
AJAX\u00a0adalah singkatan dari\u00a0Asynchronous\u00a0JavaScript\u00a0and XML. Pada dasarnya ajax menggunakan\u00a0XMLHttpRequest\u00a0object Javascript untuk membuat request ke server secara asynchronous atau tanpa melakukan refresh halaman website. Berikut ini adalah aplikasi Chat sederhana untuk menunjukkan penggunaan XMLHttpRequest (AJAX) di ASP.NET. Ini adalah aplikasi chatting dimana<\/p>\n","protected":false},"author":2505,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/posts\/1200"}],"collection":[{"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/users\/2505"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/comments?post=1200"}],"version-history":[{"count":0,"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/posts\/1200\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/media?parent=1200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/categories?post=1200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jaringanhosting.com\/index.php\/wp-json\/wp\/v2\/tags?post=1200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}