WebSocket과 JavaScript를 사용하여 온라인 질문 및 답변 시스템을 구현하는 방법-JS 튜토리얼-php.cn

WebSocket과 JavaScript를 사용하여 온라인 질문 및 답변 시스템을 구현하는 방법

PHPz

풀어 주다： 2023-12-16 17:39:25

원래의

867명이 탐색했습니다.

WebSocket과 JavaScript를 사용하여 온라인 질문 및 답변 시스템을 구현하는 방법

WebSocket은 실시간 통신 기능을 구현하기 위해 웹 개발에 널리 사용되는 TCP 프로토콜 기반의 전이중 통신 프로토콜입니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 간단한 온라인 질문 및 답변 시스템을 구현하는 방법을 소개합니다.

HTML 페이지 작성

먼저 기본 HTML 템플릿을 작성하고 여기에 WebSocket에 필요한 JavaScript 라이브러리를 도입합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线问答系统</title>
</head>
<body>
    <div id="messages"></div>
    <form id="message-form">
        <input type="text" id="message-input" placeholder="请输入您的问题...">
        <button type="submit">提交</button>
    </form>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="websocket.js"></script>
</body>
</html>

로그인 후 복사

WebSocket 코드 작성

WebSocket 관련 JavaScript 코드를 별도의 파일에 저장합니다. 이 파일에서는 서버가 클라이언트에 메시지를 보낼 수 있도록 여러 변수와 함수를 정의하고 WebSocket 연결을 설정해야 합니다.

// 声明变量
const serverUrl = 'ws://localhost:8080'; // WebSocket服务器地址
const socket = new WebSocket(serverUrl); // WebSocket连接

// 监听WebSocket事件
socket.onopen = function(event) {
    console.log('[WebSocket] 连接成功', event);
};

socket.onclose = function(event) {
    console.log('[WebSocket] 连接关闭', event);
};

socket.onerror = function(event) {
    console.error('[WebSocket] 发生错误', event);
};

socket.onmessage = function(event) {
    console.log('[WebSocket] 收到消息', event);
    showMessage(event.data);
};

// 发送消息到WebSocket服务器
function sendMessage(message) {
    socket.send(message);
}

// 显示消息
function showMessage(message) {
    $('#messages').append($('<p>').text(`机器人：${message}`));
}

// 提交问题
$('#message-form').submit(function(event) {
    event.preventDefault();
    const messageInput = $('#message-input');
    const message = messageInput.val();
    messageInput.val('');
    $('#messages').append($('<p>').text(`你：${message}`));
    sendMessage(message);
});

로그인 후 복사

서버 코드 작성

마지막으로 서버 측 코드를 작성해야 합니다. 본 글에서는 서버의 개발 환경으로 Node.js를 사용하고, WebSocket 서비스를 제공하기 위해 ws 라이브러리를 사용하겠습니다.

const WebSocketServer = require('ws').Server;

const server = new WebSocketServer({ port: 8080 });

console.log('WebSocket服务器已启动');

// 监听WebSocket连接事件
server.on('connection', function(socket) {
    console.log('WebSocket连接已建立');

    // 监听WebSocket消息事件
    socket.on('message', function(message) {
        console.log('收到消息', message);
        const response = handleQuestion(message);
        socket.send(response);
    });

    // 监听WebSocket关闭事件
    socket.on('close', function() {
        console.log('WebSocket连接已关闭');
    });
});

// 处理问题
function handleQuestion(question) {
    // TODO: 添加问题处理逻辑
    return '这是机器人的回答';
}

로그인 후 복사

위 코드에서는 WebSocketServer 객체를 생성하고 이에 대한 연결, 메시지 및 닫기 이벤트를 수신합니다. 클라이언트가 보낸 메시지를 받으면 서버는 handlerQuestion 함수를 호출하여 이를 처리한 다음 클라이언트에 응답을 다시 보냅니다.

온라인 질문 및 답변 시스템 테스트

이제 두 개의 브라우저 창을 엽니다. 하나는 클라이언트 역할을 하고 다른 하나는 서버 역할을 합니다. 클라이언트 브라우저에 질문을 입력하고 제출 버튼을 클릭하세요. 서버는 로봇의 응답을 나타내는 메시지로 응답하고 이를 클라이언트 브라우저에 표시합니다.

이 시점에서 우리는 간단한 온라인 질문과 답변 시스템을 성공적으로 구현했습니다. 물론 이것은 단지 기본적인 예일 뿐이며 필요에 따라 확장하고 최적화할 수 있습니다.

위 내용은 WebSocket과 JavaScript를 사용하여 온라인 질문 및 답변 시스템을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!