WebSocket과 JavaScript를 사용하여 온라인 질문 및 답변 시스템을 구현하는 방법
- 王林원래의
- 2023-12-16 17:39:26821검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!