JavaScript dan WebSocket: Membina enjin carian masa nyata yang cekap

JavaScript dan WebSocket: Cipta enjin carian masa nyata yang cekap

Pengenalan:
Dengan perkembangan Internet, pengguna mempunyai keperluan yang lebih tinggi dan lebih tinggi untuk enjin carian masa nyata. Apabila mencari dengan enjin carian tradisional, pengguna perlu mengklik butang carian untuk mendapatkan hasil kaedah ini tidak dapat memenuhi keperluan pengguna untuk hasil carian masa nyata. Oleh itu, menggunakan teknologi JavaScript dan WebSocket untuk melaksanakan enjin carian masa nyata telah menjadi topik hangat. Artikel ini akan memperkenalkan secara terperinci penggunaan teknologi JavaScript dan WebSocket untuk mencipta enjin carian masa nyata yang cekap, dan memberikan contoh kod khusus.

1 Pengenalan kepada WebSocket
WebSocket ialah protokol komunikasi dupleks penuh yang boleh mewujudkan sambungan berterusan antara penyemak imbas dan pelayan dan mencapai penghantaran data dua hala masa nyata. Tidak seperti permintaan HTTP tradisional, selepas sambungan WebSocket diwujudkan antara klien dan pelayan, sambungan boleh dikekalkan untuk masa yang lama tanpa perlu menghantar permintaan setiap kali.

2. Langkah pelaksanaan enjin carian masa nyata

1. Reka bentuk antara muka hadapan
   Pertama, kita perlu mereka bentuk antara muka hadapan di mana pengguna boleh memasukkan kata kunci carian dan memaparkan hasil carian dalam masa nyata. Antara muka boleh dilaksanakan menggunakan HTML dan CSS, jadi saya tidak akan menerangkan secara terperinci di sini.
2. Penulisan kod bahagian hadapan
   Gunakan JavaScript untuk melaksanakan logik bahagian hadapan. Pertama, kita perlu mewujudkan sambungan dengan pelayan melalui WebSocket Kodnya adalah seperti berikut:

var socket = new WebSocket('ws://localhost:8080');
socket.onopen = function() {
  console.log('WebSocket连接已建立');
  // 其他初始化操作
};

socket.onmessage = function(event) {
  var data = JSON.parse(event.data);
  // 处理服务器推送的数据
};

socket.onclose = function() {
  console.log('WebSocket连接已关闭');
};

Selepas sambungan WebSocket diwujudkan, kita boleh memantau kata kunci yang dimasukkan oleh pengguna dan menghantar kata kunci ke pelayan untuk carian. Kod tersebut adalah seperti berikut:

var input = document.getElementById('search-input');
input.addEventListener('input', function(event) {
  var keyword = event.target.value;
  socket.send(keyword);
});

3. Penulisan kod sebelah pelayan
   Gunakan mana-mana bahasa pengaturcaraan bahagian belakang (seperti Java, Python) untuk menulis kod sebelah pelayan, menerima kata kunci yang dihantar oleh bahagian hadapan, melakukan carian dan hantar hasil carian ke bahagian hadapan. Berikut ialah kod contoh mudah:

Kod contoh Java:

@ServerEndpoint("/search")
public class SearchEndpoint {

    @OnMessage
    public void onMessage(Session session, String keyword) {
      List<String> results = search(keyword);
      session.getBasicRemote().sendText(JSON.stringify(results));
    }
  
    private List<String> search(String keyword) {
      // 执行搜索操作，获取搜索结果
    }
  
}

Kod contoh Python:

from flask import Flask, websocket

app = Flask(__name__)

@app.websocket('/search')
def search(ws):
  while True:
    keyword = ws.receive()
    results = search(keyword)
    ws.send(json.dumps(results))

def search(keyword):
  # 执行搜索操作，获取搜索结果

if __name__ == '__main__':
  app.run()

4. Kemas kini antara muka hadapan
   Selepas menerima hasil carian yang dikembalikan daripada pelayan, kami perlu mengemas kini bahagian hadapan antara muka untuk memaparkan hasil carian. Contoh kod adalah seperti berikut:

socket.onmessage = function(event) {
  var data = JSON.parse(event.data);
  updateSearchResults(data);
};

function updateSearchResults(results) {
  var searchResults = document.getElementById('search-results');
  searchResults.innerHTML = '';

  results.forEach(function(result) {
    var item = document.createElement('li');
    item.textContent = result;
    searchResults.appendChild(item);
  });
}

5. Pengendalian pengecualian dan pengoptimuman lain
   Dalam penggunaan sebenar, kami juga perlu menambah pengendalian pengecualian, pemprosesan halaman, pengoptimuman prestasi, dll. untuk meningkatkan kestabilan dan prestasi enjin carian masa nyata .

Kesimpulan:
Dengan menggunakan teknologi JavaScript dan WebSocket, kami boleh melaksanakan enjin carian masa nyata yang cekap. Hujung hadapan mewujudkan sambungan dengan hujung belakang melalui WebSocket, menghantar kata kunci yang dimasukkan oleh pengguna ke pelayan dalam masa nyata untuk carian dan menolak hasil carian ke hujung hadapan dalam masa nyata untuk paparan. Enjin carian masa nyata ini meningkatkan pengalaman pengguna dan memenuhi permintaan tinggi pengguna untuk hasil carian masa nyata. Melalui pengenalan artikel ini, saya percaya bahawa pembaca mempunyai pemahaman yang lebih mendalam tentang menggunakan JavaScript dan WebSocket untuk melaksanakan enjin carian masa nyata.

Atas ialah kandungan terperinci JavaScript dan WebSocket: Membina enjin carian masa nyata yang cekap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!