【第97期】一文认识AI写作工具一文读懂WebSockets(Socket.IO)
概述
WebSockets是一种通信协议，提供了客户端和服务器之间的全双工通信能力。这意味着客户端和服务器可以在任何时候相互发送消息，而无需像传统的HTTP请求那样重新建立连接。Socket.IO是一个基于WebSockets的JavaScript库，它不仅提供了跨平台的实时双向通信能力，还解决了WebSockets的兼容性问题，并且具有易于使用的API。
入门Socket.IO
安装
首先，你需要在你的项目中安装Socket.IO。如果你使用的是Node.js，可以通过npm轻松安装：
npm install socket.io
对于客户端，你可以通过在HTML文件中添加以下标签来引入Socket.IO：
<script src="/socket.io/socket.io.js"></script>
基础示例
服务器端
在Node.js中，你可以这样初始化一个Socket.IO服务器：
const io = require('socket.io')(3000);
io.on('connection', (socket) => {
console.log('新用户连接');
socket.on('disconnect', () => {
console.log('用户断开连接');
});
});
上述代码创建了一个监听3000端口的Socket.IO服务器。每当有新用户连接时，就会打印出“新用户连接”，当用户断开连接时，会打印出“用户断开连接”。
客户端
在客户端，连接到Socket.IO服务器：
const socket = io('http://localhost:3000');
socket.on('connect', () => {
console.log('已连接到服务器');
});
这段代码会尝试连接到运行在本地3000端口的Socket.IO服务器，并在成功连接后在控制台打印出消息。
实战应用：实时聊天应用
让我们一起创建一个简单的实时聊天应用，以此来更好地理解Socket.IO的实际应用。
服务器端
const io = require('socket.io')(3000);
io.on('connection', (socket) => {
console.log('新用户连接');
socket.on('chat message', (msg) => {
io.emit('chat message', msg);
});
});
在这个示例中，服务器监听名为chat message的消息。每当收到消息时，服务器就会将这个消息广播给所有连接的客户端。
客户端
<!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>发送</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>
在客户端，我们创建了一个简单的HTML页面，包括一个用于显示消息的列表和一个用于发送消息的表单。每当用户提交表单时，客户端就会通过Socket.IO向服务器发送消息。同时，它也监听从服务器接收的chat message消息，并将其添加到页面上。
关注我们
评论