正文

HTML5 WebSocket 实战指南：轻松实现实时通信的5个实用示例

/0 浏览量
0504

在互联网快速发展的今天，实时通信已经成为许多应用程序的核心功能。HTML5 WebSocket 提供了一种在客户端和服务器之间建立一个持久的连接，实现双向通信的强大方式。本文将为你提供5个实用的 HTML5 WebSocket 示例，帮助你轻松实现实时通信。

示例一：简单的WebSocket连接

在这个示例中，我们将创建一个简单的WebSocket连接，实现客户端和服务器之间的文本消息传递。

1.1 客户端代码

// 创建WebSocket连接
var socket = new WebSocket('ws://localhost:8080');

// 连接打开时触发
socket.onopen = function(event) {
  console.log('连接已打开');
};

// 连接关闭时触发
socket.onclose = function(event) {
  console.log('连接已关闭');
};

// 接收服务器消息
socket.onmessage = function(event) {
  console.log('收到消息：' + event.data);
};

// 发送消息到服务器
socket.send('Hello, WebSocket!');

1.2 服务器代码（Node.js）

const WebSocket = require('ws');

// 创建WebSocket服务器
const wss = new WebSocket.Server({ port: 8080 });

// 处理客户端连接
wss.on('connection', function(ws) {
  console.log('连接已建立');

  // 接收客户端消息
  ws.on('message', function(message) {
    console.log('收到消息：' + message);
  });

  // 发送消息到客户端
  ws.send('Hello, WebSocket!');
});

示例二：多人聊天室

在这个示例中，我们将实现一个简单的多人聊天室，支持用户在线交流。

2.1 客户端代码

// 创建WebSocket连接
var socket = new WebSocket('ws://localhost:8080');

// 连接打开时触发
socket.onopen = function(event) {
  console.log('连接已打开');
};

// 连接关闭时触发
socket.onclose = function(event) {
  console.log('连接已关闭');
};

// 接收服务器消息
socket.onmessage = function(event) {
  console.log('收到消息：' + event.data);
};

// 发送消息到服务器
function sendMessage() {
  var message = document.getElementById('message').value;
  socket.send(message);
}

2.2 服务器代码（Node.js）

const WebSocket = require('ws');

// 创建WebSocket服务器
const wss = new WebSocket.Server({ port: 8080 });

// 用户列表
var users = [];

// 处理客户端连接
wss.on('connection', function(ws) {
  // 添加用户
  users.push(ws);

  // 接收客户端消息
  ws.on('message', function(message) {
    // 向所有用户广播消息
    users.forEach(function(user) {
      user.send(message);
    });
  });

  // 连接关闭时移除用户
  ws.on('close', function() {
    users = users.filter(function(user) {
      return user !== ws;
    });
  });
});

示例三：实时股票信息

在这个示例中，我们将实现一个实时股票信息推送功能，用户可以实时查看股票价格的变动。

3.1 客户端代码

// 创建WebSocket连接
var socket = new WebSocket('ws://localhost:8080');

// 连接打开时触发
socket.onopen = function(event) {
  console.log('连接已打开');
};

// 连接关闭时触发
socket.onclose = function(event) {
  console.log('连接已关闭');
};

// 接收服务器消息
socket.onmessage = function(event) {
  var data = JSON.parse(event.data);
  console.log('股票信息：' + data.name + '，价格：' + data.price);
};

3.2 服务器代码（Node.js）

const WebSocket = require('ws');
const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);

// 模拟股票数据
var stockData = {
  'AAPL': 150.00,
  'GOOGL': 2725.00,
  'MSFT': 285.00
};

// 定时更新股票数据
setInterval(function() {
  for (var key in stockData) {
    stockData[key] += Math.random() * 0.5 - 0.25;
  }
}, 1000);

// 创建WebSocket服务器
io.on('connection', function(socket) {
  // 向客户端推送股票数据
  setInterval(function() {
    socket.emit('stock', stockData);
  }, 1000);
});

http.listen(8080, function() {
  console.log('WebSocket服务器启动，监听端口8080');
});

示例四：实时地图定位

在这个示例中，我们将实现一个实时地图定位功能，用户可以在地图上实时查看其他用户的定位信息。

4.1 客户端代码

// 创建WebSocket连接
var socket = new WebSocket('ws://localhost:8080');

// 连接打开时触发
socket.onopen = function(event) {
  console.log('连接已打开');
};

// 连接关闭时触发
socket.onclose = function(event) {
  console.log('连接已关闭');
};

// 发送位置信息到服务器
function sendLocation() {
  var lat = document.getElementById('lat').value;
  var lng = document.getElementById('lng').value;
  socket.send(JSON.stringify({ lat: lat, lng: lng }));
}

4.2 服务器代码（Node.js）

const WebSocket = require('ws');
const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);

// 用户位置信息
var locations = [];

// 创建WebSocket服务器
io.on('connection', function(socket) {
  // 接收位置信息
  socket.on('location', function(data) {
    locations.push(data);
    // 向所有用户广播位置信息
    io.emit('location', data);
  });

  // 连接关闭时移除位置信息
  socket.on('disconnect', function() {
    locations = locations.filter(function(location) {
      return location.socketId !== socket.id;
    });
  });
});

http.listen(8080, function() {
  console.log('WebSocket服务器启动，监听端口8080');
});

示例五：实时游戏对战

在这个示例中，我们将实现一个简单的实时游戏对战功能，支持多个玩家在同一房间内进行对战。

5.1 客户端代码

// 创建WebSocket连接
var socket = new WebSocket('ws://localhost:8080');

// 连接打开时触发
socket.onopen = function(event) {
  console.log('连接已打开');
};

// 连接关闭时触发
socket.onclose = function(event) {
  console.log('连接已关闭');
};

// 发送游戏操作到服务器
function sendAction(action) {
  socket.send(JSON.stringify({ action: action }));
}

5.2 服务器代码（Node.js）

const WebSocket = require('ws');
const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);

// 游戏房间信息
var rooms = {};

// 创建WebSocket服务器
io.on('connection', function(socket) {
  // 创建新房间
  socket.on('createRoom', function(roomName) {
    if (!rooms[roomName]) {
      rooms[roomName] = { players: [] };
    }
    rooms[roomName].players.push(socket.id);
    socket.join(roomName);
    console.log('房间' + roomName + '创建成功，玩家数量：' + rooms[roomName].players.length);
  });

  // 加入房间
  socket.on('joinRoom', function(roomName) {
    if (rooms[roomName]) {
      rooms[roomName].players.push(socket.id);
      socket.join(roomName);
      console.log('玩家加入房间' + roomName + '，玩家数量：' + rooms[roomName].players.length);
    }
  });

  // 离开房间
  socket.on('leaveRoom', function(roomName) {
    if (rooms[roomName]) {
      rooms[roomName].players = rooms[roomName].players.filter(function(playerId) {
        return playerId !== socket.id;
      });
      socket.leave(roomName);
      console.log('玩家离开房间' + roomName + '，玩家数量：' + rooms[roomName].players.length);
    }
  });

  // 接收游戏操作
  socket.on('action', function(data) {
    // 向房间内其他玩家广播操作
    io.to(data.roomName).emit('action', data);
  });
});

http.listen(8080, function() {
  console.log('WebSocket服务器启动，监听端口8080');
});

通过以上5个示例，你可以了解到HTML5 WebSocket在实时通信领域的应用。在实际开发中，你可以根据自己的需求，结合这些示例进行修改和扩展。希望这篇文章能帮助你轻松实现实时通信功能。

-- 展开阅读全文 --