【第97期】一文認(rèn)識AI寫作工具一文讀懂WebSockets(Socket.IO)
概述
WebSockets是一種通信協(xié)議，提供了客戶端和服務(wù)器之間的全雙工通信能力。這意味著客戶端和服務(wù)器可以在任何時候相互發(fā)送消息，而無需像傳統(tǒng)的HTTP請求那樣重新建立連接。Socket.IO是一個基于WebSockets的JavaScript庫，它不僅提供了跨平臺的實時雙向通信能力，還解決了WebSockets的兼容性問題，并且具有易于使用的API。
入門Socket.IO
安裝
首先，你需要在你的項目中安裝Socket.IO。如果你使用的是Node.js，可以通過npm輕松安裝：
npm install socket.io
對于客戶端，你可以通過在HTML文件中添加以下標(biāo)簽來引入Socket.IO：
<script src="/socket.io/socket.io.js"></script>
基礎(chǔ)示例
服務(wù)器端
在Node.js中，你可以這樣初始化一個Socket.IO服務(wù)器：
const io = require('socket.io')(3000);
io.on('connection', (socket) => {
console.log('新用戶連接');
socket.on('disconnect', () => {
console.log('用戶斷開連接');
});
});
上述代碼創(chuàng)建了一個監(jiān)聽3000端口的Socket.IO服務(wù)器。每當(dāng)有新用戶連接時，就會打印出“新用戶連接”，當(dāng)用戶斷開連接時，會打印出“用戶斷開連接”。
客戶端
在客戶端，連接到Socket.IO服務(wù)器：
const socket = io('http://localhost:3000');
socket.on('connect', () => {
console.log('已連接到服務(wù)器');
});
這段代碼會嘗試連接到運行在本地3000端口的Socket.IO服務(wù)器，并在成功連接后在控制臺打印出消息。
實戰(zhàn)應(yīng)用：實時聊天應(yīng)用
讓我們一起創(chuàng)建一個簡單的實時聊天應(yīng)用，以此來更好地理解Socket.IO的實際應(yīng)用。
服務(wù)器端
const io = require('socket.io')(3000);
io.on('connection', (socket) => {
console.log('新用戶連接');
socket.on('chat message', (msg) => {
io.emit('chat message', msg);
});
});
在這個示例中，服務(wù)器監(jiān)聽名為chat message的消息。每當(dāng)收到消息時，服務(wù)器就會將這個消息廣播給所有連接的客戶端。
客戶端
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO 聊天示例</title>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
socket.on('chat message', function(msg){
var item = document.createElement('li');
item.textContent = msg;
document.getElementById('messages').appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
</script>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>發(fā)送</button>
</form>
<script>
var form = document.querySelector('form');
var input = document.getElementById('m');
form.onsubmit = function(e) {
e.preventDefault();
socket.emit('chat message', input.value);
input.value = '';
return false;
};
</script>
</body>
</html>
在客戶端，我們創(chuàng)建了一個簡單的HTML頁面，包括一個用于顯示消息的列表和一個用于發(fā)送消息的表單。每當(dāng)用戶提交表單時，客戶端就會通過Socket.IO向服務(wù)器發(fā)送消息。同時，它也監(jiān)聽從服務(wù)器接收的chat message消息，并將其添加到頁面上。
關(guān)注我們
