正文

掌握HTML5 WebSocket：轻松实现实时通信的5个实用示例解析

/0 浏览量
0521

在互联网时代，实时通信已经成为许多应用的核心功能。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有了更深入的了解。在实际应用中，你可以根据自己的需求进行扩展和优化。希望这些示例能帮助你轻松实现实时通信。

-- 展开阅读全文 --