JavaScript と WebSocket を使用してリアルタイムのオンライン採用システムを実装する方法-jsチュートリアル-php.cn

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

WBOY

リリース： 2023-12-17 10:54:15

オリジナル

826 人が閲覧しました

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

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

1. 背景知識

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

2. 実装手順

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

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

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

ログイン後にコピー

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

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

ログイン後にコピー

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

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

ログイン後にコピー

バックエンドサーバーの実装
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 サーバーを実装しました。この記事がリアルタイムのオンライン採用システムの構築に役立つことを願っています。

参考: