隨著互聯(lián)網(wǎng)的快速發(fā)展，實(shí)時(shí)通訊功能已經(jīng)成為了許多網(wǎng)站和應(yīng)用的必備功能。而Node.js作為一種輕量級(jí)、高效、基于事件驅(qū)動(dòng)的異步I/O JavaScript運(yùn)行環(huán)境，能夠快速構(gòu)建高性能的實(shí)時(shí)應(yīng)用程序，因此成為了開發(fā)實(shí)時(shí)通訊功能的不二選擇。本文將詳細(xì)介紹如何利用Node.js實(shí)現(xiàn)基于Web的實(shí)時(shí)聊天功能，并提供具體的代碼示例。
首先，我們需要搭建一個(gè)基礎(chǔ)的Web服務(wù)器，可使用Node.js自帶的http模塊實(shí)現(xiàn)。具體代碼如下：
const http = require('http');
const server = http.createServer();
server.listen(3000, () => {
console.log('服務(wù)器已啟動(dòng)，監(jiān)聽端口：3000');
});
登錄后復(fù)制
接下來，我們需要使用socket.io模塊實(shí)現(xiàn)實(shí)時(shí)通訊功能。socket.io是一種基于WebSocket協(xié)議并兼容多種傳輸方式的實(shí)時(shí)通訊庫，支持在客戶端與服務(wù)端之間實(shí)現(xiàn)雙向通信，非常適用于實(shí)時(shí)聊天場(chǎng)景。安裝socket.io模塊的命令如下：
npm install socket.io
登錄后復(fù)制
安裝完成后，我們可以在服務(wù)器端使用socket.io模塊啟用實(shí)時(shí)通訊功能。具體代碼如下：
const http = require('http');
const server = http.createServer();
const io = require('socket.io')(server);
io.on('connection', (socket) => {
console.log('有一個(gè)用戶已連接');
socket.on('disconnect', () => {
console.log('有一個(gè)用戶已斷開連接');
});
socket.on('chat message', (msg) => {
console.log('收到一條新消息：' + msg);
io.emit('chat message', msg);
});
});
server.listen(3000, () => {
console.log('服務(wù)器已啟動(dòng)，監(jiān)聽端口：3000');
});
登錄后復(fù)制
上面的代碼中，我們監(jiān)聽了socket.io的connection事件，表示有用戶連接進(jìn)來時(shí)會(huì)觸發(fā)。當(dāng)有用戶連接時(shí)，我們會(huì)在控制臺(tái)輸出一條提示信息。接著，我們監(jiān)聽了socket.io的disconnect事件，表示用戶斷開連接時(shí)會(huì)觸發(fā)。當(dāng)有用戶斷開連接時(shí)，我們也會(huì)在控制臺(tái)輸出一條提示信息。最后，我們監(jiān)聽了自定義的chat message事件，表示收到用戶發(fā)來的新消息。當(dāng)有新消息到來時(shí)，我們將其廣播給所有在線用戶。
在客戶端，我們需要引入socket.io-client模塊，連接到服務(wù)器并實(shí)現(xiàn)實(shí)時(shí)聊天的顯示和發(fā)送。具體代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>實(shí)時(shí)聊天</title>
<script src="https://cdn.socket.io/socket.io-3.0.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(function() {
var socket = io();
$('form').submit(function(e) {
e.preventDefault(); // 阻止表單提交
var msg = $('#m').val();
socket.emit('chat message', msg); // 發(fā)送消息到服務(wù)器
$('#m').val('');
return false;
});
socket.on('chat message', function(msg) { // 收到新消息
$('#messages').append($('<li>').text(msg));
});
});
</script>
</head>
<body>
<ul id="messages"></ul>
<form>
<input type="text" id="m" autocomplete="off" />
<button>發(fā)送</button>
</form>
</body>
</html>
登錄后復(fù)制
上面的代碼中，我們引入了socket.io-client和jQuery模塊。在頁面加載完成后，我們創(chuàng)建了與服務(wù)器的連接，并監(jiān)聽了chat message事件，表示收到新消息時(shí)會(huì)觸發(fā)。當(dāng)有新消息到來時(shí)，我們將其添加到頁面上的消息列表中。同時(shí)，當(dāng)用戶在輸入框輸入文本并點(diǎn)擊發(fā)送按鈕時(shí)，我們將消息發(fā)送到服務(wù)器。
綜上所述，我們通過使用Node.js和socket.io模塊實(shí)現(xiàn)了基于WebSocket協(xié)議的實(shí)時(shí)聊天功能。在實(shí)際項(xiàng)目中，我們還可以對(duì)數(shù)據(jù)進(jìn)行持久化存儲(chǔ)、身份認(rèn)證、消息推送等擴(kuò)展，提供更加豐富的實(shí)時(shí)通訊服務(wù)。
