Rumah > hujung hadapan web > tutorial js > Cara menggunakan JavaScript dan WebSocket untuk mencapai perundingan pelaburan dalam talian masa nyata

Cara menggunakan JavaScript dan WebSocket untuk mencapai perundingan pelaburan dalam talian masa nyata

王林
Lepaskan: 2023-12-17 20:51:47
asal
632 orang telah melayarinya

Cara menggunakan JavaScript dan WebSocket untuk mencapai perundingan pelaburan dalam talian masa nyata

Cara menggunakan JavaScript dan WebSocket untuk mencapai perundingan pelaburan dalam talian masa nyata

Dalam bidang kewangan moden, perundingan pelaburan dalam talian masa nyata adalah penting untuk pelabur dan institusi perniagaan. Pada masa lalu, apabila pelabur perlu berunding dengan penganalisis, mereka sering menghabiskan banyak masa menunggu jawapan. Kini, dengan menggabungkan keupayaan masa nyata JavaScript dan WebSocket, kami boleh mencapai perundingan pelaburan dalam talian masa nyata, yang bukan sahaja menjimatkan masa, tetapi juga meningkatkan kecekapan. Inilah cara untuk mencapai ini menggunakan JavaScript dan WebSockets.

Langkah pertama: Wujudkan sambungan WebSocket

Untuk merealisasikan pertukaran maklumat perundingan pelaburan dalam talian masa nyata, kami perlu mewujudkan sambungan WebSocket terlebih dahulu. WebSocket ialah protokol rangkaian untuk komunikasi dua hala melalui satu sambungan TCP. Mewujudkan sambungan WebSocket dalam JavaScript adalah sangat mudah dan boleh dicapai dengan coretan kod berikut:

var webSocket = new WebSocket('ws://localhost:8080');

webSocket.onerror = function(event) {
  console.error('WebSocket error:' + JSON.stringify(event));
};

webSocket.onopen = function(event) {
  console.log('WebSocket connected.');
};

webSocket.onmessage = function(event) {
  console.log('WebSocket message received:' + event.data);
};
Salin selepas log masuk

Di sini kami telah mewujudkan sambungan ke pelayan WebSocket pada port localhost 8080. Apabila sambungan WebSocket diwujudkan, kami akan menerima acara onopen dan mencetak sebarang mesej yang kami terima melalui pengendali acara onmessage.

Langkah 2: Buat ruang sembang

Dalam aplikasi praktikal, kami memerlukan cara untuk memaparkan maklumat interaktif antara pelabur dan perunding, yang dicapai melalui bilik sembang. Dalam bilik sembang ini, pelabur dan perunding boleh menghantar dan menerima mesej. Untuk membuat ruang sembang, kami perlu menambah kod berikut pada fail HTML:

<div class="chat-window">
  <div class="chat-area"></div>
  <form id="chat-form">
    <input type="text" id="message-input" placeholder="Type message here...">
    <button type="submit" class="send-button">Send</button>
  </form>
</div>
Salin selepas log masuk

Kami telah menambah induk tetingkap sembang pada fail HTML, yang termasuk kawasan sembang dan borang untuk membolehkan pelabur dan perunding menghantar mesej. Kami perlu menulis logik dalam kod JavaScript untuk melengkapkan penyerahan borang dan memproses mesej sembang.

Langkah 3: Hantar dan terima mesej

Menghantar dan menerima mesej dalam sambungan WebSocket kami boleh dicapai dengan kod berikut:

function sendMessage() {
  var messageInput = document.getElementById('message-input');
  var message = messageInput.value;
  webSocket.send(message);
  messageInput.value = '';
}

document.getElementById('chat-form').addEventListener('submit', function(event) {
  event.preventDefault();
  sendMessage();
});

webSocket.onmessage = function(event) {
  var message = event.data;
  var chatArea = document.querySelector('.chat-area');
  chatArea.innerHTML += '<div class="message">' + message + '</div>';
};
Salin selepas log masuk

Di sini kami mentakrifkan fungsi sendMessage, yang membaca input pengguna dari kotak input Mesej, hantar mesej ke pelayan WebSocket dan kosongkan kotak input. Kami juga menambah pendengar acara untuk memanggil fungsi sendMessage apabila pengguna menghantar mesej dalam borang.

Pengendali acara WebSocket.onmessage mendapatkan data daripada acara yang diterima (dalam kes ini, mesej) dan menambahkannya pada kawasan sembang. Dengan menggunakan atribut innerHTML, kami boleh dengan mudah melampirkan mesej baharu pada tetingkap sembang.

Kod Contoh

Berikut ialah contoh kod JavaScript lengkap yang menunjukkan cara menggunakan WebSocket untuk melaksanakan perundingan pelaburan dalam talian masa nyata.

var webSocket = new WebSocket('ws://localhost:8080');

webSocket.onerror = function(event) {
  console.error('WebSocket error:' + JSON.stringify(event));
};

webSocket.onopen = function(event) {
  console.log('WebSocket connected.');
};

function sendMessage() {
  var messageInput = document.getElementById('message-input');
  var message = messageInput.value;
  webSocket.send(message);
  messageInput.value = '';
}

document.getElementById('chat-form').addEventListener('submit', function(event) {
  event.preventDefault();
  sendMessage();
});

webSocket.onmessage = function(event) {
  var message = event.data;
  var chatArea = document.querySelector('.chat-area');
  chatArea.innerHTML += '<div class="message">' + message + '</div>';
};
Salin selepas log masuk

Buka kod ini dalam penyemak imbas anda untuk menggunakan pelayan WebSocket pada port 8080 hos tempatan anda. Masukkan mesej anda dalam tetingkap sembang dan tekan butang "Hantar", mesej anda akan muncul secara automatik di kawasan sembang.

Kesimpulan

Menggunakan JavaScript dan WebSocket untuk perundingan pelaburan dalam talian masa nyata akan meningkatkan kecekapan komunikasi antara pelabur dan institusi perniagaan dalam bidang kewangan. Dengan bantuan sambungan WebSocket dan kod JavaScript yang ringkas, kami boleh melaksanakan perundingan pelaburan dalam talian masa nyata dengan mudah. Sama ada anda ingin memulakan perniagaan atau mengubah suai projek, kaedah di atas boleh digunakan untuk membantu mencapai produktiviti yang lebih tinggi.

Atas ialah kandungan terperinci Cara menggunakan JavaScript dan WebSocket untuk mencapai perundingan pelaburan dalam talian masa nyata. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan