JavaScript と WebSocket を使用してリアルタイムのオンライン採用システムを実装する方法

JavaScript と WebSocket を使用してリアルタイムのオンライン採用システムを実装する方法

はじめに:
インターネットの発展と知能の進歩により、人材紹介業界のニーズも高まっています。従来の採用方法は、効率性やリアルタイム性が不十分であることが徐々に明らかになってきたため、JavaScript と WebSocket を使用してリアルタイムのオンライン採用システムを実装することが良い選択になりました。この記事では、JavaScript と WebSocket を使用してリアルタイムのオンライン採用システムを構築する方法と、具体的なコード例を紹介します。

1. 背景知識

1. WebSocket: WebSocket は、ブラウザとサーバーの間に双方向の通信接続を確立できる TCP ベースのプロトコルです。従来の HTTP リクエストと比較して、WebSocket の利点は、サーバーがクライアントにメッセージをアクティブにプッシュする機能を実現し、リアルタイム通信を実現できることです。
2. JavaScript: JavaScript は、Web 開発で広く使用されているスクリプト言語です。 JavaScript を通じて、Web ページ内の要素を操作したり、スタイルを変更したり、ユーザー イベントに応答したりすることができます。

2. 実装手順

1. フロントエンド ページのデザイン
   まず、採用情報を表示し、ユーザーが次のことを行えるようにするフロントエンド ページをデザインする必要があります。選ぶ。このページは HTML と CSS を使用してレイアウトおよびスタイル設定でき、JavaScript を使用してユーザーのアクションを制御し、バックエンドと通信します。
2. WebSocket 接続の確立
   JavaScript では、WebSocket オブジェクトを使用してサーバーとの WebSocket 接続を確立できます。まず、WebSocket コンストラクターを使用して WebSocket オブジェクトを作成し、次にそのオブジェクトのオープン イベント リスナーを使用して、接続が成功した後のロジックを処理します。

// 建立WebSocket连接
var socket = new WebSocket('ws://localhost:8080/realtime');

// 连接成功时的处理逻辑
socket.onopen = function() {
  console.log('WebSocket连接成功');
};

3. サーバー メッセージのリッスン
   WebSocket 接続が正常に確立されたら、onmessage イベント リスナーを使用して、サーバーからクライアントにプッシュされたメッセージをリッスンできます。メッセージを受信した後、JavaScript を使用してフロントエンド ページのコンテンツを更新できます。

// 监听服务器推送的消息
socket.onmessage = function(event) {
  var message = event.data;
  // 更新前端页面内容
  document.getElementById('messageBox').innerHTML = message;
};

4. サーバーにメッセージを送信する
   サーバーからメッセージを受信するだけでなく、WebSocket オブジェクトの send メソッドを使用してサーバーにメッセージを送信することもできます。ユーザーがボタンをクリックするかフォームに入力すると、ユーザーの入力情報が JavaScript を通じて取得され、サーバーに送信されます。

// 向服务器发送消息
function sendMessage() {
  var message = document.getElementById('inputBox').value;
  socket.send(message);
}

5. バックエンド サーバーの実装
   WebSocket 接続をサポートするにはバックエンド サーバーが必要です。Node.js を使用して単純な WebSocket サーバーを実装できます。

// 引入websocket模块
const WebSocket = require('ws');

// 创建WebSocket服务器
const wss = new WebSocket.Server({ port: 8080 });

// 监听WebSocket连接事件
wss.on('connection', function (socket) {
  console.log('WebSocket连接成功');

  // 监听消息事件
  socket.on('message', function (message) {
    console.log('收到消息：' + message);
    // 处理逻辑
  });

  // 发送消息
  socket.send('欢迎访问招聘系统');
});

3. 概要
この記事の導入部を通じて、JavaScript と WebSocket を使用してリアルタイムのオンライン採用システムを構築する方法を学びました。まず、求人情報を表示し、ユーザーと対話するためのフロントエンド ページを設計しました。次に、JavaScript コードを使用してサーバーへの WebSocket 接続を確立し、サーバーからのプッシュ メッセージをリッスンし、サーバーにメッセージを送信しました。最後に、Node.js を使用して単純な WebSocket サーバーを実装しました。この記事がリアルタイムのオンライン採用システムの構築に役立つことを願っています。

参考:

1. WebSocket API: https://developer.mozilla.org/en-US/docs/Web/API/WebSocket
2. WebSocket の構築Node.js のサーバー: https://www.npmjs.com/package/ws

以上がJavaScript と WebSocket を使用してリアルタイムのオンライン採用システムを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。