首页手记 WebSocket入门指南：轻松搭建实时通信应用

WebSocket入门指南：轻松搭建实时通信应用

标签：

Html5 JavaScript WebApp

概述

WebSocket是一种在单个持久连接上进行全双工通信的协议，允许客户端和服务器之间实时交换数据。该协议在握手过程中使用HTTP，但一旦握手成功，后续通信则基于WebSocket进行，大大减少了延迟和资源消耗。WebSocket广泛应用于在线聊天、协作工具和实时游戏等场景。

WebSocket简介

WebSocket是一种在单个TCP连接上进行全双工通信的协议。它使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以传输数据，都是基于TCP的双向通信通道。WebSocket可以用来进行实时通信，创建更加丰富的Web应用，例如在线聊天、协作工具、实时游戏等。

什么是WebSocket

WebSocket是一种在单个持久连接上进行全双工通信的协议。与HTTP不同，WebSocket连接一旦建立，客户端和服务器就可以相互发送数据，而不需要再次建立连接或请求。WebSocket连接建立后，可以持续开放，直到一方关闭连接。

WebSocket协议在握手过程中使用HTTP协议，但一旦握手成功，后续的通信则基于WebSocket协议进行。这意味着WebSocket可以复用现有的HTTP服务器，减少了服务器的部署成本。

WebSocket的工作原理

WebSocket的工作原理可以分为以下几个步骤：

握手过程：客户端发送一个握手请求到服务器，请求中包含了一些特定的头部信息，如Sec-WebSocket-Key、Sec-WebSocket-Version等。服务器收到请求后，返回一个握手响应，响应中也包含了一些头部信息，如Sec-WebSocket-Accept、Sec-WebSocket-Protocol等。
建立连接：握手成功后，WebSocket连接正式建立。此时，客户端和服务器之间可以进行全双工通信，即两者可以同时发送和接收数据。
数据传输：在连接建立后，客户端和服务器可以发送和接收数据帧。数据帧可以包含文本或二进制数据。
关闭连接：当一方不再需要通信时，可以发送关闭请求。另一方收到关闭请求后，也会发送关闭确认。一旦关闭确认发送，连接就正式关闭。

以下是握手过程和数据传输的代码示例：

// 客户端握手请求
const socket = new WebSocket('ws://localhost:12345');
socket.onopen = function() {
  console.log("WebSocket connection established.");
};

// 服务器端握手响应
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 12345 });

wss.on('connection', function(ws) {
  ws.on('message', function(message) {
    console.log('Received message:', message);
    ws.send('Echo: ' + message);
  });
});

WebSocket的优势

WebSocket相比于传统的HTTP协议，具有以下几个优势：

低延迟：WebSocket连接一旦建立，客户端与服务器之间可以立即发送数据，大大减少了延迟。
全双工通信：WebSocket允许客户端和服务器之间同时发送和接收数据，而无需等待对方的响应。
服务器推送：WebSocket允许服务器主动向客户端推送数据，而不需要客户端频繁发起请求。
节省资源：相比于轮询机制，WebSocket可以节省服务器资源和带宽。

WebSocket的基本概念

WebSocket是一种协议，用于在客户端和服务器之间建立全双工通信。以下是与WebSocket相关的几个基本概念。

WebSocket协议

WebSocket协议定义了客户端和服务器之间的通信规则，包括握手过程、数据帧格式、关闭连接等。WebSocket协议版本号为13，由RFC 6455定义。

WebSocket协议在握手过程中使用了HTTP协议，但一旦握手成功，后续的通信则基于WebSocket协议进行。WebSocket协议使用自定义的头部信息，如Sec-WebSocket-Key、Sec-WebSocket-Version等。握手成功后，客户端和服务器之间可以传输文本或二进制数据。

Socket与WebSocket的区别

Socket是一个通用术语，指的是在网络上的两个程序之间进行双向通信的端点。Socket可以建立在各种协议之上，如TCP、UDP等。

WebSocket是一种具体的协议，用于在单个持久连接上进行全双工通信。WebSocket基于TCP协议，但在握手过程中使用了HTTP协议，一旦握手成功，后续的通信则基于WebSocket协议进行。WebSocket协议允许客户端和服务器之间同时发送和接收数据，而不需要等待对方的响应。

以下是一个简单的Socket与WebSocket的区别示例：

Socket示例：

import socket

server_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
server_socket.bind(('localhost', 12345))
server_socket.listen(5)

client_socket, address = server_socket.accept()
client_socket.send("Hello, client!")
client_socket.close()

WebSocket示例：

const socket = new WebSocket('ws://localhost:12345');

socket.onopen = function() {
  socket.send("Hello, server!");
};

socket.onmessage = function(event) {
  console.log("Received message:", event.data);
};

socket.onclose = function() {
  console.log("Connection closed.");
};

WebSocket的状态码

WebSocket定义了几种状态码，用于表示连接的状态。以下是一些常见的状态码：

1000：正常关闭连接。
1001：客户端请求关闭连接。
1002：协议错误。
1003：非法数据。
1005：服务器收到无效的关闭码。
1006：服务器关闭连接，但未发送关闭码。
1007：消息数据不符合协议。
1008：客户端或服务器违反了协议。
1009：消息过长。
1010：扩展不支持。
1011：服务器内部错误。
1012：服务器尝试恢复连接。
1013：TLS握手失败。

以下是检查和处理这些状态码的代码示例：

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 12345 });

wss.on('connection', function(ws) {
  ws.on('message', function(message) {
    console.log('Received message:', message);
    ws.send('Echo: ' + message);
  });

  ws.on('close', (code, reason) => {
    console.log(`Connection closed with code ${code} and reason ${reason}`);
  });
});

WebSocket的使用场景

WebSocket可以用于实时通信的应用场景，例如在线聊天、协作工具、实时游戏等。

实时聊天应用

实时聊天应用可以利用WebSocket进行客户端和服务器之间的实时通信。当用户输入消息时，客户端将消息发送到服务器，服务器将消息广播给其他在线的用户。以下是一个简单的WebSocket聊天应用示例：

客户端代码：

const socket = new WebSocket('ws://localhost:12345');

socket.onopen = function() {
  console.log("Connected to server.");
};

socket.onmessage = function(event) {
  console.log("Received message:", event.data);
};

socket.onclose = function() {
  console.log("Connection closed.");
};

document.getElementById('send-button').addEventListener('click', function() {
  const message = document.getElementById('message-input').value;
  socket.send(message);
});

服务器代码：

const WebSocketServer = require('ws').Server;
const wss = new WebSocketServer({ port: 12345 });

wss.on('connection', function(ws) {
  ws.on('message', function(message) {
    console.log("Received message:", message);
    // 广播消息给其他客户端
    wss.clients.forEach(function(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

在线协作工具

在线协作工具可以利用WebSocket实现多人实时编辑同一个文档。当一个用户修改文档时，客户端将修改发送到服务器，服务器将修改广播给其他在线的用户。以下是一个简单的在线协作工具示例：

客户端代码：

const socket = new WebSocket('ws://localhost:12345');

socket.onopen = function() {
  console.log("Connected to server.");
};

socket.onmessage = function(event) {
  console.log("Received message:", event.data);
  // 更新文档内容
  const documentElement = document.getElementById('document');
  documentElement.innerHTML = event.data;
};

socket.onclose = function() {
  console.log("Connection closed.");
};

document.getElementById('edit-button').addEventListener('click', function() {
  const message = document.getElementById('message-input').value;
  socket.send(message);
});

服务器代码：

const WebSocketServer = require('ws').Server;
const wss = new WebSocketServer({ port: 12345 });

let documentContent = "";

wss.on('connection', function(ws) {
  ws.send(documentContent);

  ws.on('message', function(message) {
    console.log("Received message:", message);
    documentContent = message;
    // 广播消息给其他客户端
    wss.clients.forEach(function(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

实时游戏

实时游戏可以利用WebSocket实现实时更新游戏状态。当一个玩家做出操作时，客户端将操作发送到服务器，服务器更新游戏状态并将状态广播给其他客户端。以下是一个简单的实时游戏示例：

客户端代码：

const socket = new WebSocket('ws://localhost:12345');

socket.onopen = function() {
  console.log("Connected to server.");
};

socket.onmessage = function(event) {
  console.log("Received message:", event.data);
  // 更新游戏状态
  const gameStateElement = document.getElementById('game-state');
  gameStateElement.innerHTML = event.data;
};

socket.onclose = function() {
  console.log("Connection closed.");
};

document.getElementById('move-button').addEventListener('click', function() {
  const direction = document.getElementById('direction-input').value;
  socket.send(direction);
});

服务器代码：

const WebSocketServer = require('ws').Server;
const wss = new WebSocketServer({ port: 12345 });

let gameState = {};

wss.on('connection', function(ws) {
  ws.send(JSON.stringify(gameState));

  ws.on('message', function(message) {
    console.log("Received message:", message);
    const direction = JSON.parse(message);
    // 更新游戏状态
    gameState = updateGameState(gameState, direction);
    // 广播游戏状态给其他客户端
    wss.clients.forEach(function(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(JSON.stringify(gameState));
      }
    });
  });
});

function updateGameState(gameState, direction) {
  // 更新游戏状态的逻辑
  return gameState;
}

WebSocket的实现

WebSocket可以通过多种编程语言实现，包括Node.js、Python等。以下是一些实现WebSocket的示例代码。

服务器端实现

WebSocket服务器可以通过多种编程语言实现。以下是一些常用的实现方式：

使用Node.js创建WebSocket服务器

Node.js是一个基于Chrome V8引擎的JavaScript运行环境。Node.js可以通过ws库创建WebSocket服务器。以下是一个简单的WebSocket服务器示例：

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 12345 });

wss.on('connection', function(ws) {
  ws.on('message', function(message) {
    console.log('Received message:', message);
    ws.send('Echo: ' + message);
  });

  ws.on('close', function() {
    console.log('Connection closed.');
  });
});

在这个示例中，WebSocket服务器监听ws://localhost:12345端口。当客户端连接到服务器时，服务器会接收客户端发送的消息，并发送一个回执消息给客户端。

使用Python创建WebSocket服务器

Python可以通过websockets库创建WebSocket服务器。以下是一个简单的WebSocket服务器示例：

import asyncio
import websockets

async def handler(websocket, path):
    async for message in websocket:
        print("Received message:", message)
        await websocket.send("Echo: " + message)

start_server = websockets.serve(handler, "localhost", 12345)

asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

在这个示例中，WebSocket服务器监听ws://localhost:12345端口。当客户端连接到服务器时，服务器会接收客户端发送的消息，并发送一个回执消息给客户端。

客户端实现

WebSocket客户端可以通过多种编程语言实现。以下是一些常用的实现方式：

使用JavaScript连接WebSocket服务器

JavaScript可以通过WebSocket对象连接WebSocket服务器。以下是一个简单的WebSocket客户端示例：

const socket = new WebSocket('ws://localhost:12345');

socket.onopen = function() {
  console.log("Connected to server.");
  socket.send("Hello, server!");
};

socket.onmessage = function(event) {
  console.log("Received message:", event.data);
};

socket.onclose = function() {
  console.log("Connection closed.");
};

在这个示例中，WebSocket客户端连接到ws://localhost:12345端口的服务器。当连接成功后，客户端发送一个消息到服务器，并接收服务器发送的消息。

使用Python连接WebSocket服务器

Python可以通过websockets库连接WebSocket服务器。以下是一个简单的WebSocket客户端示例：

import asyncio
import websockets

async def handler():
    uri = "ws://localhost:12345"
    async with websockets.connect(uri) as websocket:
        await websocket.send("Hello, server!")
        response = await websocket.recv()
        print("Received message:", response)

asyncio.get_event_loop().run_until_complete(handler())

在这个示例中，WebSocket客户端连接到ws://localhost:12345端口的服务器。当连接成功后，客户端发送一个消息到服务器，并接收服务器发送的消息。

WebSocket的安全性

WebSocket的安全性是WebSocket应用中的一个重要方面。以下是一些WebSocket安全性相关的概念和实践。

如何保证WebSocket的安全

WebSocket连接可以利用SSL/TLS加密来保证数据的安全性。SSL/TLS提供了一种在客户端和服务器之间建立加密通道的方式，使得数据在传输过程中不会被窃听或篡改。

WebSocket连接可以通过WebSocket URL中的wss前缀来启用SSL/TLS加密。例如，wss://localhost:12345表示一个使用SSL/TLS加密的WebSocket连接。

使用SSL/TLS加密WebSocket连接

WebSocket连接可以通过SSL/TLS加密来保证数据的安全性。在服务器端，需要配置SSL/TLS证书来启用加密连接。以下是一个简单的使用SSL/TLS加密的WebSocket服务器示例：

const WebSocket = require('ws');
const fs = require('fs');
const http = require('http');
const https = require('https');

const options = {
  key: fs.readFileSync('./server.key'),
  cert: fs.readFileSync('./server.crt')
};

const httpServer = http.createServer();
const httpsServer = https.createServer(options);

const wssHttp = new WebSocket.Server({ server: httpServer });
const wssHttps = new WebSocket.Server({ server: httpsServer });

httpServer.listen(8080);
httpsServer.listen(8443);

wssHttp.on('connection', function(ws) {
  ws.on('message', function(message) {
    console.log('Received message:', message);
    ws.send('Echo: ' + message);
  });

  ws.on('close', function() {
    console.log('Connection closed.');
  });
});

wssHttps.on('connection', function(ws) {
  ws.on('message', function(message) {
    console.log('Received message:', message);
    ws.send('Echo: ' + message);
  });

  ws.on('close', function() {
    console.log('Connection closed.');
  });
});

在这个示例中，WebSocket服务器使用了SSL/TLS证书来启用加密连接。客户端可以连接到wss://localhost:8443端口的服务器，以建立加密的WebSocket连接。

WebSocket中的身份验证与授权

WebSocket连接可以通过多种方式实现身份验证与授权。以下是一些常见的方法：

基于令牌的身份验证：客户端在连接WebSocket服务器时，发送一个包含令牌的头部信息。服务器通过验证令牌来确定客户端的身份和权限。
基于HTTP的身份验证：客户端在连接WebSocket服务器时，发送一个包含认证信息的HTTP头部。服务器通过验证认证信息来确定客户端的身份和权限。
基于Cookie的身份验证：客户端在连接WebSocket服务器时，发送一个包含Cookie的头部信息。服务器通过验证Cookie来确定客户端的身份和权限。

以下是一个基于令牌的身份验证的WebSocket服务器示例：

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 12345 });

wss.on('connection', function(ws) {
  ws.on('message', function(message) {
    if (message.startsWith('auth:')) {
      const token = message.slice(5);
      if (isValidToken(token)) {
        console.log('Authenticated client.');
        ws.send('Authenticated successfully.');
      } else {
        console.log('Invalid token.');
        ws.close();
      }
    } else {
      console.log('Received message:', message);
      ws.send('Echo: ' + message);
    }
  });

  ws.on('close', function() {
    console.log('Connection closed.');
  });
});

function isValidToken(token) {
  // 身份验证逻辑
  return token === 'valid-token';
}

在这个示例中，客户端在连接WebSocket服务器时，发送一个包含令牌的消息。服务器通过验证令牌来确定客户端的身份，并发送一个回执消息给客户端。如果令牌无效，则服务器关闭连接。

WebSocket的常见问题与解决方法

WebSocket在实际应用中可能会遇到一些常见问题，以下是一些常见的问题及其解决方法。

WebSocket连接失败的原因及解决方法

WebSocket连接失败的原因可能包括以下几种：

服务器端问题：服务器端的WebSocket服务器可能没有正确启动，或者服务器端没有正确处理WebSocket握手过程。
客户端问题：客户端可能使用的WebSocket URL有误，或者客户端使用的WebSocket库版本过旧。
网络问题：网络连接可能不稳定，或者防火墙可能阻止WebSocket连接。

以下是一些解决WebSocket连接失败的方法：

检查服务器端配置：确保WebSocket服务器已经正确启动，并且服务器端的WebSocket握手过程已经正确实现。
检查客户端配置：确保WebSocket URL正确，并且客户端使用的WebSocket库版本是最新的。
检查网络连接：确保网络连接稳定，并且防火墙没有阻止WebSocket连接。

如何处理心跳包和超时问题

WebSocket连接可能会因为网络问题而出现超时或断开的情况。为了保持WebSocket连接的稳定性，可以使用心跳包机制。

心跳包是一种定期发送的消息，用于检测连接是否仍然有效。以下是一个使用心跳包的WebSocket服务器示例：

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 12345 });

wss.on('connection', function(ws) {
  ws.on('message', function(message) {
    console.log('Received message:', message);
    ws.send('Echo: ' + message);
  });

  ws.on('pong', function() {
    console.log('Heartbeat received.');
  });

  setInterval(function() {
    if (ws.readyState === WebSocket.OPEN) {
      ws.ping();
    }
  }, 30000);
});

wss.on('error', function(error) {
  console.error('WebSocket error:', error);
});

在这个示例中，WebSocket服务器每30秒发送一次心跳包。客户端收到心跳包后，会回复一个pong消息。服务器端收到pong消息后，认为连接仍然有效。

WebSocket与HTTP的异同及转换

WebSocket与HTTP都是基于TCP协议的协议，但它们在握手过程和数据传输方式上有很大的区别。

握手过程：WebSocket握手过程使用了HTTP协议，但握手成功后，后续的通信则基于WebSocket协议进行。HTTP握手过程则是完整的HTTP请求和响应。
数据传输方式：WebSocket允许客户端和服务器之间同时发送和接收数据，而不需要等待对方的响应。HTTP则需要客户端发起请求，服务器响应请求。

WebSocket可以与HTTP进行转换，使得WebSocket连接可以复用现有的HTTP服务器。以下是一个使用HTTP与WebSocket进行转换的示例：

const http = require('http');
const WebSocket = require('ws');

const server = http.createServer();
const wss = new WebSocket.Server({ server });

wss.on('connection', function(ws) {
  ws.on('message', function(message) {
    console.log('Received message:', message);
    ws.send('Echo: ' + message);
  });
});

server.on('upgrade', function(request, socket, head) {
  wss.handleUpgrade(request, socket, head, function(ws) {
    wss.addConnection(ws);
  });
});

server.listen(12345);

在这个示例中，WebSocket服务器复用了HTTP服务器的端口。当客户端发起WebSocket握手请求时，HTTP服务器会将请求转发给WebSocket服务器。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

守着星空守着你

手记
篇

粉丝

39

获赞与收藏

267

关注作者，订阅最新文章

阅读免费教程

Html5 入门教程

25个小节 60138 815

JavaScript 入门教程

80个小节 312438 2198

后端通用面试教程

41个小节 30583 343

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

WebSocket入门指南：轻松搭建实时通信应用

什么是WebSocket

WebSocket的工作原理

WebSocket的优势

WebSocket协议

Socket与WebSocket的区别

WebSocket的状态码

实时聊天应用

在线协作工具

实时游戏

服务器端实现

使用Node.js创建WebSocket服务器

使用Python创建WebSocket服务器

客户端实现

使用JavaScript连接WebSocket服务器

使用Python连接WebSocket服务器

如何保证WebSocket的安全

使用SSL/TLS加密WebSocket连接

WebSocket中的身份验证与授权

WebSocket连接失败的原因及解决方法

如何处理心跳包和超时问题

WebSocket与HTTP的异同及转换

阅读免费教程