在互联网时代,实时通信已经成为许多应用的核心功能。HTML5 WebSocket 提供了一种在单个 TCP 连接上进行全双工通信的协议,它允许服务器和客户端之间进行实时数据交换。下面,我将通过5个实用示例来解析如何掌握HTML5 WebSocket,实现实时通信。
示例一:简单的WebSocket聊天室
1.1 客户端代码
// 客户端JavaScript代码
var ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
console.log('连接成功');
};
ws.onmessage = function(event) {
console.log('收到消息:' + event.data);
};
ws.onclose = function() {
console.log('连接关闭');
};
ws.onerror = function() {
console.log('连接出错');
};
1.2 服务器端代码(Node.js)
// 服务器端Node.js代码
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function(ws) {
ws.on('message', function(message) {
console.log('收到消息:' + message);
ws.send('收到你的消息:' + message);
});
});
示例二:实时股票信息推送
在这个示例中,服务器端将实时推送股票信息给客户端。
2.1 客户端代码
// 客户端JavaScript代码
var ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
ws.send('subscribe stock');
};
ws.onmessage = function(event) {
console.log('股票信息:' + event.data);
};
ws.onclose = function() {
console.log('连接关闭');
};
ws.onerror = function() {
console.log('连接出错');
};
2.2 服务器端代码(Node.js)
// 服务器端Node.js代码
const WebSocket = require('ws');
const express = require('express');
const app = express();
const wss = new WebSocket.Server({ port: 8080 });
app.get('/stock', function(req, res) {
res.send('订阅成功');
});
wss.on('connection', function(ws) {
ws.on('message', function(message) {
if (message === 'subscribe stock') {
// 模拟实时股票信息
setInterval(() => {
ws.send('股票信息:' + Math.random());
}, 1000);
}
});
});
app.listen(8080);
示例三:实时位置共享
在这个示例中,用户可以在地图上实时共享自己的位置。
3.1 客户端代码
// 客户端JavaScript代码
var ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
console.log('连接成功');
};
ws.onmessage = function(event) {
var data = JSON.parse(event.data);
console.log('位置信息:' + data.latitude + ',' + data.longitude);
};
ws.onclose = function() {
console.log('连接关闭');
};
ws.onerror = function() {
console.log('连接出错');
};
// 模拟实时位置更新
setInterval(() => {
ws.send(JSON.stringify({
latitude: Math.random() * 90,
longitude: Math.random() * 180
}));
}, 1000);
3.2 服务器端代码(Node.js)
// 服务器端Node.js代码
const WebSocket = require('ws');
const express = require('express');
const app = express();
const wss = new WebSocket.Server({ port: 8080 });
app.get('/location', function(req, res) {
res.send('位置共享成功');
});
wss.on('connection', function(ws) {
ws.on('message', function(message) {
console.log('位置信息:' + message);
});
});
app.listen(8080);
示例四:实时游戏对战
在这个示例中,玩家可以在游戏中实时与对方进行对战。
4.1 客户端代码
// 客户端JavaScript代码
var ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
console.log('连接成功');
};
ws.onmessage = function(event) {
var data = JSON.parse(event.data);
console.log('游戏信息:' + data);
};
ws.onclose = function() {
console.log('连接关闭');
};
ws.onerror = function() {
console.log('连接出错');
};
// 模拟游戏操作
setInterval(() => {
ws.send(JSON.stringify({
type: 'move',
direction: 'up'
}));
}, 1000);
4.2 服务器端代码(Node.js)
// 服务器端Node.js代码
const WebSocket = require('ws');
const express = require('express');
const app = express();
const wss = new WebSocket.Server({ port: 8080 });
app.get('/game', function(req, res) {
res.send('游戏对战成功');
});
wss.on('connection', function(ws) {
ws.on('message', function(message) {
console.log('游戏信息:' + message);
});
});
app.listen(8080);
示例五:实时监控设备状态
在这个示例中,服务器端可以实时监控设备状态,并将信息推送给客户端。
5.1 客户端代码
// 客户端JavaScript代码
var ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
console.log('连接成功');
};
ws.onmessage = function(event) {
var data = JSON.parse(event.data);
console.log('设备状态:' + data.status);
};
ws.onclose = function() {
console.log('连接关闭');
};
ws.onerror = function() {
console.log('连接出错');
};
5.2 服务器端代码(Node.js)
// 服务器端Node.js代码
const WebSocket = require('ws');
const express = require('express');
const app = express();
const wss = new WebSocket.Server({ port: 8080 });
app.get('/device', function(req, res) {
res.send('设备监控成功');
});
wss.on('connection', function(ws) {
ws.on('message', function(message) {
console.log('设备状态:' + message);
});
});
// 模拟设备状态更新
setInterval(() => {
wss.clients.forEach(function each(client) {
if (client.readyState === WebSocket.OPEN) {
client.send(JSON.stringify({
status: 'online'
}));
}
});
}, 1000);
app.listen(8080);
通过以上5个实用示例,相信你已经对HTML5 WebSocket有了更深入的了解。在实际应用中,你可以根据自己的需求进行扩展和优化。希望这些示例能帮助你轻松实现实时通信。
