正文

HTML5 WebSocket入门：轻松实现实时数据传输的5个实用示例

/0 浏览量
1030

了解WebSocket

WebSocket是一种网络通信协议，允许在单个TCP连接上进行全双工通信。与传统的HTTP请求相比，WebSocket能够实现服务器与客户端之间的实时数据传输，无需不断地轮询服务器。

实现WebSocket的步骤

  1. 建立WebSocket连接：客户端和服务器通过握手建立WebSocket连接。
  2. 发送和接收消息：客户端和服务器可以通过连接发送和接收数据。
  3. 关闭连接：当通信完成后，可以关闭WebSocket连接。

5个实用示例

示例1：实时聊天室

代码示例

// 客户端
const ws = new WebSocket('ws://localhost:8080');

ws.onopen = function(event) {
  ws.send('Hello, Server!');
};

ws.onmessage = function(event) {
  console.log('Message from server:', event.data);
};

ws.onclose = function(event) {
  console.log('WebSocket is closed now.');
};

// 服务器
const WebSocketServer = require('ws').Server;

const wss = new WebSocketServer({ port: 8080 });

wss.on('connection', function(ws) {
  ws.on('message', function(message) {
    console.log('Received:', message);
    ws.send('Server received your message!');
  });
});

示例2：实时股票信息

代码示例

// 客户端
const ws = new WebSocket('ws://localhost:8080');

ws.onopen = function(event) {
  ws.send('GET_STOCK_INFO');
};

ws.onmessage = function(event) {
  console.log('Stock info:', event.data);
};

// 服务器
const WebSocketServer = require('ws').Server;

const wss = new WebSocketServer({ port: 8080 });

wss.on('connection', function(ws) {
  ws.on('message', function(message) {
    if (message === 'GET_STOCK_INFO') {
      ws.send(JSON.stringify({ stock_price: 100.5 }));
    }
  });
});

示例3：实时天气信息

代码示例

// 客户端
const ws = new WebSocket('ws://localhost:8080');

ws.onopen = function(event) {
  ws.send('GET_WEATHER_INFO');
};

ws.onmessage = function(event) {
  console.log('Weather info:', event.data);
};

// 服务器
const WebSocketServer = require('ws').Server;

const wss = new WebSocketServer({ port: 8080 });

wss.on('connection', function(ws) {
  ws.on('message', function(message) {
    if (message === 'GET_WEATHER_INFO') {
      ws.send(JSON.stringify({ temperature: 25 }));
    }
  });
});

示例4：实时游戏数据

代码示例

// 客户端
const ws = new WebSocket('ws://localhost:8080');

ws.onopen = function(event) {
  ws.send('GET_GAME_DATA');
};

ws.onmessage = function(event) {
  console.log('Game data:', event.data);
};

// 服务器
const WebSocketServer = require('ws').Server;

const wss = new WebSocketServer({ port: 8080 });

wss.on('connection', function(ws) {
  ws.on('message', function(message) {
    if (message === 'GET_GAME_DATA') {
      ws.send(JSON.stringify({ score: 50 }));
    }
  });
});

示例5：实时视频直播

代码示例

// 客户端
const ws = new WebSocket('ws://localhost:8080');

ws.onopen = function(event) {
  ws.send('START_LIVE_STREAM');
};

ws.onmessage = function(event) {
  // 处理视频流数据
};

// 服务器
const WebSocketServer = require('ws').Server;

const wss = new WebSocketServer({ port: 8080 });

wss.on('connection', function(ws) {
  ws.on('message', function(message) {
    if (message === 'START_LIVE_STREAM') {
      // 生成视频流数据并发送给客户端
    }
  });
});

总结

通过以上5个示例，相信你已经对HTML5 WebSocket有了更深入的了解。在实际开发中，WebSocket的应用场景非常广泛，如实时聊天、股票信息、天气信息、游戏数据、视频直播等。希望这些示例能帮助你更好地掌握WebSocket技术。

-- 展开阅读全文 --