步驟
- 選擇一個WebSocket服務器,這裏選擇到的模塊是ws模塊
npm i ws
- 創建一個 WebSocket 服務器 新建一個 server.js 編寫如下代碼
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3000 });
wss.on('connection', (socket) => {
console.log('Client connected');
socket.on('message', (message) => {
console.log(`Received message: ${message}`);
// 回覆消息
const reply = `You said: ${message}`;
socket.send(reply);
});
socket.on('close', () => {
console.log('Client disconnected');
});
});
- 這時候我們需要一個頁面進行發送消息，所以新建一個index.html代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket Chat</title>
</head>
<body>
<div id="messages"></div>
<form id="message-form">
<input type="text" id="message-input">
<button type="submit">Send</button>
</form>
<script>
const socket = new WebSocket('ws://localhost:3000');
let flag = false
socket.addEventListener('open', (event) => {
console.log('Connected to WebSocket server');
});
socket.addEventListener('message', (event) => {
if(flag) { // 是我方的話不走以下
flag = false
return
}
const message = event.data
if (message instanceof Blob) {
const reader = new FileReader();
reader.readAsText(message);
reader.onload = () => {
const text = reader.result;
displayMessage(text, '對方');
};
} else {
displayMessage(message);
}
})
socket.addEventListener('close', (event) => {
console.log('Disconnected from WebSocket server');
});
const form = document.getElementById('message-form');
const input = document.getElementById('message-input');
const messages = document.getElementById('messages');
form.addEventListener('submit', (event) => {
event.preventDefault();
const message = input.value;
input.value = ''
flag = true
socket.send(message);
displayMessage(message, '我');
});
function displayMessage(message, name) {
const p = document.createElement('p');
p.textContent = name+': '+message;
messages.appendChild(p);
}
</script>
</body>
</html>
這個HTML頁面包含了一個消息輸入框和一個發送按鈕，當用戶在輸入框中輸入消息並點擊發送按鈕時，會將消息發送到WebSocket服務器，並將其顯示在頁面上
通過socket.send來發送消息、通過socket.addEventListener來監聽頁面收到的消息、通過displayMessage函數來將消息顯示在頁面上
用nodejs來啓動server.js如下node serve.js
在單獨打開兩個index.html就能進行對話了