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

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

标签：

杂七杂八

概述

WebSocket入门介绍了一种允许服务器主动向客户端推送数据的全双工通信协议，相比传统的HTTP协议，WebSocket显著提高了实时通信的效率和性能。文章详细阐述了WebSocket的工作原理、与HTTP的区别、应用场景以及编程实现方法。

WebSocket基础知识

什么是WebSocket

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据，在WebSocket连接打开后，服务器和客户端之间就可以互相发送任意类型的数据，包括文本、二进制数据等。WebSocket实现了双向通信，而不是像HTTP那样请求和响应的单向通信。

WebSocket与HTTP的区别

WebSocket 和 HTTP 都是基于TCP的网络协议，但它们有着本质的区别。HTTP协议是无状态的，每次请求都需要重新建立连接，而WebSocket一旦建立连接后，可以保持连接状态，实现双向通信。

请求和响应模式：HTTP基于客户端和服务器之间的请求-响应模式，每次请求都需要一个新的连接。而WebSocket则是持久连接，支持双向数据传输。
协议头：HTTP使用HTTP协议头，如GET、POST等，而WebSocket使用WebSocket协议头，比如Sec-WebSocket-Key、Sec-WebSocket-Version等。
性能：HTTP需要频繁建立和关闭连接，因此效率较低。而WebSocket保持连接状态，因此效率较高。

WebSocket的工作原理

WebSocket的工作原理主要包括以下几个步骤：

握手过程：WebSocket连接的建立需要客户端和服务器之间的握手过程，握手过程是基于HTTP协议的。客户端发送一个特殊的HTTP请求来升级到WebSocket协议，服务器响应后，握手成功，WebSocket连接就建立了。
数据传输：握手成功后，WebSocket可以传输任意类型的数据，包括文本和二进制数据。
关闭连接：在数据传输完毕后，客户端和服务器可以关闭WebSocket连接。

握手过程示例

// 握手过程示例
var socket = new WebSocket("ws://localhost:8080");
socket.onopen = function() {
    console.log("WebSocket connection opened");
    socket.send("Hello Server!");
};
socket.onmessage = function(event) {
    console.log("Received: " + event.data);
};
socket.onclose = function() {
    console.log("WebSocket connection closed");
};

# 服务器端处理握手过程
async def handler(websocket, path):
    await websocket.send("Hello Client!");
    await websocket.close()

数据传输过程

WebSocket连接建立后，客户端和服务端可以互相发送消息。以下是一个客户端发送消息和接收消息的示例。

if ("WebSocket" in window) {
  var socket = new WebSocket("ws://localhost:8080");

  socket.onopen = function(event) {
    socket.send("Hello Server!");
  }

  socket.onmessage = function(event) {
    console.log("Received: " + event.data);
  }
} else {
  alert("您的浏览器不支持WebSocket");
}

服务器端处理数据传输

# 服务器端处理数据传输
async def handler(websocket, path):
    async for message in websocket:
        print(f"Received: {message}")
        await websocket.send(f"Echo: {message}")

WebSocket工作流程

客户端连接建立

客户端连接WebSocket服务器的过程如下：

客户端通过HTTP请求来建立WebSocket连接。
服务器响应HTTP头，并将协议升级为WebSocket。
客户端收到服务器响应后，WebSocket连接成功建立。

if ("WebSocket" in window) {
  var socket = new WebSocket("ws://localhost:8080");
} else {
  alert("您的浏览器不支持WebSocket");
}

服务器端响应

服务器端需要实现WebSocket服务器来处理客户端的连接请求。以下是一个简单的Python WebSocket服务器示例，使用了websockets库。

import asyncio
import websockets

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

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

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

数据传输过程

WebSocket连接建立后，客户端和服务端可以互相发送消息。以下是一个JavaScript客户端发送消息和接收消息的示例。

if ("WebSocket" in window) {
  var socket = new WebSocket("ws://localhost:8080");

  socket.onopen = function(event) {
    socket.send("Hello Server!");
  }

  socket.onmessage = function(event) {
    console.log("Received: " + event.data);
  }
} else {
  alert("您的浏览器不支持WebSocket");
}

WebSocket应用场景

实时聊天应用

WebSocket非常适合用于实时聊天应用。实时聊天应用需要客户端和服务端之间能够实时传输消息。以下是一个简单的实时聊天应用示例。

客户端代码：

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Chat</title>
</head>
<body>
    <input id="input" type="text" />
    <button onclick="sendMessage()">Send</button>
    <ul id="messages"></ul>
</body>
<script>
if ("WebSocket" in window) {
    var socket = new WebSocket("ws://localhost:8080");

    socket.onmessage = function(event) {
        var messages = document.getElementById("messages");
        var message = document.createElement("li");
        message.appendChild(document.createTextNode(event.data));
        messages.appendChild(message);
    }

    function sendMessage() {
        var input = document.getElementById("input");
        socket.send(input.value);
        input.value = "";
    }
} else {
    alert("您的浏览器不支持WebSocket");
}
</script>
</html>

服务器代码：

import asyncio
import websockets

connected = set()

async def handler(websocket, path):
    connected.add(websocket)
    try:
        async for message in websocket:
            print(f"Received: {message}")
            for ws in connected:
                await ws.send(f"Echo: {message}")
    finally:
        connected.remove(websocket)

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

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

在线协作工具

WebSocket非常适合用于在线协作工具。在在线协作工具中，需要实现实时更新文档、表格等功能。以下是一个简单的在线协作工具示例。

客户端代码：

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Collaboration</title>
</head>
<body>
    <textarea id="document" rows="20" cols="50"></textarea>
</body>
<script>
if ("WebSocket" in window) {
    var socket = new WebSocket("ws://localhost:8080");

    socket.onmessage = function(event) {
        document.getElementById("document").value = event.data;
    }

    function updateDocument() {
        socket.send(document.getElementById("document").value);
    }
    setInterval(updateDocument, 1000);
} else {
    alert("您的浏览器不支持WebSocket");
}
</script>
</html>

服务器代码：

import asyncio
import websockets

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

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

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

实时股票市场数据展示

WebSocket非常适合用于实时股票市场数据展示。实时股票市场数据展示需要客户端和服务端之间能够实时传输市场数据。以下是一个简单的实时股票市场数据展示示例。

客户端代码：

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Stock Market</title>
</head>
<body>
    <div id="stock-info"></div>
</body>
<script>
if ("WebSocket" in window) {
    var socket = new WebSocket("ws://localhost:8080");

    socket.onmessage = function(event) {
        var stockInfo = document.getElementById("stock-info");
        stockInfo.innerHTML = event.data;
    }
} else {
    alert("您的浏览器不支持WebSocket");
}
</script>
</html>

服务器代码：

import asyncio
import websockets

async def handler(websocket, path):
    import random
    while True:
        price = random.randint(100, 200)
        await websocket.send(f"Stock Price: {price}")
        await asyncio.sleep(1)

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

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

WebSocket编程入门

使用JavaScript实现WebSocket客户端

WebSocket客户端可以通过JavaScript轻松实现。以下是一个简单的WebSocket客户端示例。

if ("WebSocket" in window) {
  var socket = new WebSocket("ws://localhost:8080");

  socket.onopen = function(event) {
    console.log("WebSocket is open now.");
  }

  socket.onmessage = function(event) {
    console.log("Received: " + event.data);
  }
} else {
  alert("您的浏览器不支持WebSocket");
}

使用Python实现WebSocket服务器

WebSocket服务器可以通过Python轻松实现。以下是一个简单的WebSocket服务器示例，使用了websockets库。

import asyncio
import websockets

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

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

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

WebSocket消息格式与编码

WebSocket消息格式可以是文本格式或二进制格式。文本格式的消息可以直接发送和接收字符串，二进制格式的消息可以发送和接收二进制数据。

文本消息

if ("WebSocket" in window) {
  var socket = new WebSocket("ws://localhost:8080");

  socket.onopen = function(event) {
    socket.send("Hello Server!");
  }

  socket.onmessage = function(event) {
    console.log("Received: " + event.data);
  }
} else {
  alert("您的浏览器不支持WebSocket");
}

二进制消息

if ("WebSocket" in window) {
  var socket = new WebSocket("ws://localhost:8080");

  socket.onopen = function(event) {
    var buffer = new ArrayBuffer(8);
    var view = new Uint8Array(buffer);
    for (var i = 0; i < view.length; i++) {
      view[i] = i;
    }
    socket.send(view);
  }

  socket.onmessage = function(event) {
    var buffer = event.data;
    var view = new Uint8Array(buffer);
    console.log(view);
  }
} else {
  alert("您的浏览器不支持WebSocket");
}

WebSocket安全注意事项

防止XSS攻击

WebSocket连接是双向的，因此需要防止XSS攻击。XSS攻击是指攻击者通过在网页中插入恶意脚本，从而使用户在访问该网页时执行恶意脚本。以下是一些防止XSS攻击的方法：

输入验证：对所有输入进行验证，确保输入内容不包含恶意脚本。
输出编码：对所有输出进行编码，确保输出内容不包含恶意脚本。
内容安全策略（CSP）：使用内容安全策略来限制网页可以加载的内容。

防止CSRF攻击

WebSocket连接是双向的，因此需要防止CSRF攻击。CSRF攻击是指攻击者利用受害者的会话凭证，伪造请求，从而执行恶意操作。以下是一些防止CSRF攻击的方法：

CSRF令牌：为每个请求生成一个唯一的CSRF令牌，并在请求中包含该令牌。服务器端验证该令牌是否有效。
同源策略：确保WebSocket服务器和Web应用位于同一个域。

数据加密与身份验证

WebSocket连接可以使用TLS加密，以确保数据传输的安全性。以下是一个使用TLS加密的WebSocket连接的示例。

客户端代码：

if ("WebSocket" in window) {
  var socket = new WebSocket("wss://localhost:8080");

  socket.onopen = function(event) {
    console.log("WebSocket is open now.");
  }

  socket.onmessage = function(event) {
    console.log("Received: " + event.data);
  }
} else {
  alert("您的浏览器不支持WebSocket");
}

服务器代码：

import asyncio
import websockets
import ssl

ssl_context = ssl.SSLContext(ssl.PROTOCOL_TLS_SERVER)
ssl_context.load_cert_chain('path/to/cert.pem', 'path/to/key.pem')

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

start_server = websockets.serve(handler, "localhost", 8080, ssl=ssl_context)

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

常见问题与调试技巧

连接建立失败

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

服务器未启动：确保WebSocket服务器已经启动。
服务器地址错误：确保WebSocket服务器的地址和端口正确。
防火墙阻止：确保防火墙允许WebSocket连接。
证书错误：确保WebSocket服务器的证书正确。

消息接收延迟

消息接收延迟的原因可能包括以下几种：

网络延迟：网络延迟可能导致消息接收延迟。
服务器延迟：服务器处理消息的速度可能导致消息接收延迟。
客户端延迟：客户端处理消息的速度可能导致消息接收延迟。

断线重连机制

断线重连机制是指在WebSocket连接断开后，客户端自动重新连接。以下是一个简单的断线重连机制的示例。

客户端代码：

if ("WebSocket" in window) {
  var socket = new WebSocket("ws://localhost:8080");

  socket.onclose = function(event) {
    setTimeout(function() {
      socket = new WebSocket("ws://localhost:8080");
    }, 5000);
  }
} else {
  alert("您的浏览器不支持WebSocket");
}

服务器代码：

import asyncio
import websockets

async def handler(websocket, path):
    while True:
        await websocket.send("Hello Client!");
        await asyncio.sleep(1)

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

www说

手记
篇

粉丝

83

获赞与收藏

493

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 31442 350

网络编程入门教程

20个小节 12897 243

Pandas 入门教程

25个小节 18783 352

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空