首页手记 WebSocket资料：初学者快速入门指南

WebSocket资料：初学者快速入门指南

标签：

Html5 JavaScript API

概述

WebSocket资料介绍了WebSocket协议的基本原理和优势，包括持久连接、全双工通信和低延迟等特点。文章还详细解释了WebSocket与HTTP的区别以及握手过程，并提供了开发环境搭建和基础代码示例。此外，还展示了WebSocket在实时聊天室、在线协同编辑工具和实时监控系统中的应用案例。

WebSocket简介

WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket使得浏览器和服务器之间的通信不再受HTTP协议的限制，可以进行实时双向通信。

WebSocket的主要特点和优势

WebSocket具备以下特点和优势：

持久连接：WebSocket连接可以保持长连接状态，不需要像HTTP那样频繁地建立和断开连接。
全双工通信：WebSocket支持客户端和服务器端之间的双向通信，可以实现真正的实时通信。
协议简单：WebSocket协议简单易懂，只需要通过握手建立连接，后续的通信就可以直接通过TCP进行。
低延迟：WebSocket连接可以在两方之间实现低延迟的数据交换，适用于需要实时数据传输的场景。

WebSocket与HTTP的区别

WebSocket和HTTP都是基于TCP协议的，但两者在工作方式上有很大的不同：

连接方式：HTTP每次请求都会重新建立连接，而WebSocket连接一旦建立，将持续保持连接状态，不需要不断重新建立连接。
消息传输：HTTP使用请求-响应模式，只有服务器可以主动发送消息；WebSocket则支持双向消息传输，双方都可以主动发送消息。
协议头：HTTP使用HTTP头，WebSocket使用WebSocket协议头，且握手时使用HTTP头进行握手。
应用场景：HTTP适用于网页浏览、数据查询等静态请求场景；WebSocket适用于需要实时双向通信的应用场景，如在线聊天、游戏等。

WebSocket工作原理

WebSocket的工作原理主要分为握手过程和消息传输机制两部分。

WebSocket的通信流程

WebSocket通信流程主要包括以下几个步骤：

客户端发起握手请求：客户端通过HTTP请求向服务器发起握手请求。
服务器响应握手：服务器接收到握手请求后，返回握手响应。
建立WebSocket连接：握手成功后，双方建立WebSocket连接。
消息传输：连接建立后，客户端和服务器端可以进行双向的消息传输。
关闭连接：当通信结束时，客户端和服务器端都可以主动关闭连接。

WebSocket握手过程详解

WebSocket握手过程需要通过HTTP协议进行握手，握手成功后才能建立WebSocket连接。具体步骤如下：

客户端发送握手请求：
- 客户端发送一个HTTP请求，其中包含Upgrade头字段，值为WebSocket，表示请求升级到WebSocket协议。
- 同时，客户端需要发送Connection头字段，值为Upgrade，表示连接需要升级。
- 客户端还需要发送Sec-WebSocket-Key头字段，值为一个随机生成的Base64编码字符串。
- 在握手请求中，客户端还可以发送其他自定义的头字段，如Sec-WebSocket-Protocol、Sec-WebSocket-Version等。
```
GET / HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBvdCAaaGFuIHNvdW5k
Sec-WebSocket-Version: 13
Origin: http://example.com
```
服务器响应握手：
- 服务器接收到握手请求后，返回一个HTTP响应，其中包含Upgrade头字段，值为WebSocket，表示已经升级为WebSocket协议。
- 服务器需要发送Connection头字段，值为Upgrade，表示连接已经升级。
- 服务器需要发送Sec-WebSocket-Accept头字段，值为对客户端发送的Sec-WebSocket-Key进行哈希计算后的Base64编码字符串。
- 服务器还可以发送其他自定义的头字段，如Sec-WebSocket-Protocol、Sec-WebSocket-Version等。
```
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pHHjo6YMKPI2rGRmkF+0=
Sec-WebSocket-Protocol: chat, superchat
```
建立WebSocket连接：
- 一旦握手成功，客户端和服务器端就可以建立WebSocket连接，开始进行双向消息传输。

WebSocket消息传输机制

WebSocket消息传输机制支持文本和二进制两种类型的消息，具体包括以下几种类型：

文本消息：使用Text类型的消息，可以发送字符串数据。
二进制消息：使用Binary类型的消息，可以发送二进制数据，如图片、音频等。
关闭消息：使用Close类型的消息，用于关闭连接。
心跳消息：可以发送心跳消息来保持连接活跃。
Ping/Pong消息：用于连接状态检查和维护。

握手过程代码示例

服务器端代码

def on_open(self):
    print("WebSocket opened")

def on_message(self, message):
    print("Received message: %s" % message)
    # 处理接收到的消息
    # ...

def on_close(self):
    print("WebSocket closed")

客户端代码

import websocket

def on_message(ws, message):
    print("Received message: %s" % message)

def on_error(ws, error):
    print("Error: %s" % error)

def on_close(ws):
    print("WebSocket closed")
    # 关闭连接时的处理逻辑
    # ...

if __name__ == "__main__":
    ws = websocket.WebSocketApp("ws://localhost:8888/websocket",
                                on_message=on_message,
                                on_error=on_error,
                                on_close=on_close)
    ws.run_forever()

WebSocket开发环境搭建

WebSocket开发环境搭建主要包括以下几个步骤：

开发环境需求

WebSocket开发需要以下环境：

编程语言：支持WebSocket的编程语言，如Python、Java、JavaScript等。
服务器端框架：支持WebSocket的服务器端框架，如Python的Tornado、Java的Spring WebSocket等。
客户端库：支持WebSocket的客户端库，如JavaScript的WebSocket API、Java的javax.websocket等。
IDE工具：如Visual Studio Code、IntelliJ IDEA等。

选择合适的开发工具

选择合适的开发工具是WebSocket开发中的重要步骤。以下是推荐的开发工具：

Visual Studio Code：适用于多种编程语言，支持WebSocket开发。
IntelliJ IDEA：适用于Java开发，支持WebSocket开发。

创建WebSocket服务器和客户端示例

创建WebSocket服务器和客户端的示例代码如下：

创建WebSocket服务器端代码（Python + Tornado）

import tornado.ioloop
import tornado.web
import tornado.websocket

class WebSocketHandler(tornado.websocket.WebSocketHandler):
    clients = set()

    def open(self):
        self.clients.add(self)
        print("WebSocket opened")

    def on_message(self, message):
        print("Received message: %s" % message)
        self.write_message("Echo: " + message)

    def on_close(self):
        self.clients.remove(self)
        print("WebSocket closed")

application = tornado.web.Application([
    (r"/websocket", WebSocketHandler),
])

if __name__ == "__main__":
    application.listen(8888)
    print("WebSocket server started at port 8888")
    tornado.ioloop.IOLoop.instance().start()

创建WebSocket客户端代码（JavaScript）

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Client</title>
    <script>
        var socket = null;

        function connect() {
            socket = new WebSocket("ws://localhost:8888/websocket");
            socket.onopen = function() {
                console.log("WebSocket connected");
            };
            socket.onmessage = function(event) {
                console.log("Received message: " + event.data);
            };
            socket.onclose = function() {
                console.log("WebSocket closed");
            };
        }

        function sendMessage() {
            if (socket) {
                var message = document.getElementById("message").value;
                socket.send(message);
            }
        }

        function closeWebSocket() {
            if (socket) {
                socket.close();
            }
        }
    </script>
</head>
<body>
    <button onclick="connect()">Connect</button>
    <button onclick="sendMessage()">Send Message</button>
    <button onclick="closeWebSocket()">Close</button>
    <input type="text" id="message" placeholder="Enter message">
</body>
</html>

WebSocket基础代码示例

WebSocket的基础代码示例包括创建WebSocket服务器端代码、创建WebSocket客户端代码以及实现基本的消息发送和接收功能。

创建WebSocket服务器端代码

Python + Tornado示例

import tornado.ioloop
import tornado.web
import tornado.websocket

class WebSocketHandler(tornado.websocket.WebSocketHandler):
    clients = set()

    def open(self):
        self.clients.add(self)
        print("WebSocket opened")

    def on_message(self, message):
        print("Received message: %s" % message)
        self.write_message("Echo: " + message)

    def on_close(self):
        self.clients.remove(self)
        print("WebSocket closed")

application = tornado.web.Application([
    (r"/websocket", WebSocketHandler),
])

if __name__ == "__main__":
    application.listen(8888)
    print("WebSocket server started at port 8888")
    tornado.ioloop.IOLoop.instance().start()

Java + Spring Boot示例

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

import java.util.Collections;
import java.util.HashSet;
import java.util.Set;

@SpringBootApplication
public class WebSocketApplication extends TextWebSocketHandler {

    private final Set<WebSocketSession> sessions = Collections.synchronizedSet(new HashSet<>());

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        sessions.add(session);
        System.out.println("WebSocket opened");
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        System.out.println("Received message: " + message.getPayload());
        session.sendMessage(new TextMessage("Echo: " + message.getPayload()));
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        sessions.remove(session);
        System.out.println("WebSocket closed");
    }

    public static void main(String[] args) {
        SpringApplication.run(WebSocketApplication.class, args);
    }
}

创建WebSocket客户端代码

Python示例

import websocket

def on_message(ws, message):
    print("Received message: %s" % message)

def on_error(ws, error):
    print("Error: %s" % error)

def on_close(ws):
    print("WebSocket closed")

if __name__ == "__main__":
    ws = websocket.WebSocketApp("ws://localhost:8888/websocket",
                                on_message=on_message,
                                on_error=on_error,
                                on_close=on_close)
    ws.run_forever()

JavaScript示例

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Client</title>
    <script>
        var socket = null;

        function connect() {
            socket = new WebSocket("ws://localhost:8888/websocket");
            socket.onopen = function() {
                console.log("WebSocket connected");
            };
            socket.onmessage = function(event) {
                console.log("Received message: " + event.data);
            };
            socket.onclose = function() {
                console.log("WebSocket closed");
            };
        }

        function sendMessage() {
            if (socket) {
                var message = document.getElementById("message").value;
                socket.send(message);
            }
        }

        function closeWebSocket() {
            if (socket) {
                socket.close();
            }
        }
    </script>
</head>
<body>
    <button onclick="connect()">Connect</button>
    <button onclick="sendMessage()">Send Message</button>
    <button onclick="closeWebSocket()">Close</button>
    <input type="text" id="message" placeholder="Enter message">
</body>
</html>

实现基本的消息发送和接收功能

Python客户端发送消息

import websocket

def on_message(ws, message):
    print("Received message: %s" % message)

def on_error(ws, error):
    print("Error: %s" % error)

def on_close(ws):
    print("WebSocket closed")

if __name__ == "__main__":
    ws = websocket.WebSocketApp("ws://localhost:8888/websocket",
                                on_message=on_message,
                                on_error=on_error,
                                on_close=on_close)
    ws.on_open = lambda ws: ws.send("Hello, WebSocket!")
    ws.run_forever()

JavaScript客户端发送消息

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Client</title>
    <script>
        var socket = null;

        function connect() {
            socket = new WebSocket("ws://localhost:8888/websocket");
            socket.onopen = function() {
                socket.send("Hello, WebSocket!");
                console.log("WebSocket connected");
            };
            socket.onmessage = function(event) {
                console.log("Received message: " + event.data);
            };
            socket.onclose = function() {
                console.log("WebSocket closed");
            };
        }
    </script>
</head>
<body>
    <button onclick="connect()">Connect and Send Message</button>
</body>
</html>

WebSocket应用案例

WebSocket的应用场景非常广泛，以下是一些常见的应用案例：

实时聊天室应用

实时聊天室应用可以通过WebSocket实现用户之间的实时通信。例如，一个多人在线聊天室可以使用WebSocket来实现实时消息的发送和接收。

服务器端代码示例（Python + Tornado）

import tornado.ioloop
import tornado.web
import tornado.websocket

class WebSocketHandler(tornado.websocket.WebSocketHandler):
    clients = set()

    def open(self):
        self.clients.add(self)
        print("WebSocket opened")

    def on_message(self, message):
        print("Received message: %s" % message)
        for client in self.clients:
            client.write_message("Message: " + message)

    def on_close(self):
        self.clients.remove(self)
        print("WebSocket closed")

application = tornado.web.Application([
    (r"/websocket", WebSocketHandler),
])

if __name__ == "__main__":
    application.listen(8888)
    print("WebSocket server started at port 8888")
    tornado.ioloop.IOLoop.instance().start()

客户端代码示例（JavaScript）

<!DOCTYPE html>
<html>
<head>
    <title>Real-Time Chat Room</title>
    <script>
        var socket = null;

        function connect() {
            socket = new WebSocket("ws://localhost:8888/websocket");
            socket.onopen = function() {
                console.log("WebSocket connected");
            };
            socket.onmessage = function(event) {
                console.log("Received message: " + event.data);
                document.getElementById("messages").innerHTML += "<br>" + event.data;
            };
            socket.onclose = function() {
                console.log("WebSocket closed");
            };
        }

        function sendMessage() {
            if (socket) {
                var message = document.getElementById("message").value;
                socket.send(message);
            }
        }

        function closeWebSocket() {
            if (socket) {
                socket.close();
            }
        }
    </script>
</head>
<body>
    <button onclick="connect()">Connect</button>
    <button onclick="sendMessage()">Send Message</button>
    <button onclick="closeWebSocket()">Close</button>
    <input type="text" id="message" placeholder="Enter message">
    <div id="messages"></div>
</body>
</html>

在线协同编辑工具

在线协同编辑工具可以通过WebSocket实现多个用户同时编辑同一个文档。WebSocket可以确保每个用户的操作都能实时同步到其他用户。

服务器端代码示例（Python + Tornado）

import tornado.ioloop
import tornado.web
import tornado.websocket

class WebSocketHandler(tornado.websocket.WebSocketHandler):
    clients = set()

    def open(self):
        self.clients.add(self)
        print("WebSocket opened")

    def on_message(self, message):
        print("Received message: %s" % message)
        for client in self.clients:
            client.write_message("Document: " + message)

    def on_close(self):
        self.clients.remove(self)
        print("WebSocket closed")

application = tornado.web.Application([
    (r"/websocket", WebSocketHandler),
])

if __name__ == "__main__":
    application.listen(8888)
    print("WebSocket server started at port 8888")
    tornado.ioloop.IOLoop.instance().start()

客户端代码示例（JavaScript）

<!DOCTYPE html>
<html>
<head>
    <title>Collaborative Editor</title>
    <script>
        var socket = null;

        function connect() {
            socket = new WebSocket("ws://localhost:8888/websocket");
            socket.onopen = function() {
                console.log("WebSocket connected");
            };
            socket.onmessage = function(event) {
                console.log("Received message: " + event.data);
                document.getElementById("editor").innerHTML += "<br>" + event.data;
            };
            socket.onclose = function() {
                console.log("WebSocket closed");
            };
        }

        function sendMessage() {
            if (socket) {
                var message = document.getElementById("message").value;
                socket.send(message);
            }
        }

        function closeWebSocket() {
            if (socket) {
                socket.close();
            }
        }
    </script>
</head>
<body>
    <button onclick="connect()">Connect</button>
    <button onclick="sendMessage()">Send Message</button>
    <button onclick="closeWebSocket()">Close</button>
    <input type="text" id="message" placeholder="Enter message">
    <div id="editor"></div>
</body>
</html>

实时监控系统

实时监控系统可以通过WebSocket实现实时数据的收集和展示。例如，一个实时监控服务器状态的系统可以使用WebSocket来实现实时数据的展示。

服务器端代码示例（Python + Tornado）

import tornado.ioloop
import tornado.web
import tornado.websocket

class WebSocketHandler(tornado.websocket.WebSocketHandler):
    clients = set()

    def open(self):
        self.clients.add(self)
        print("WebSocket opened")

    def on_message(self, message):
        print("Received message: %s" % message)
        for client in self.clients:
            client.write_message("Status: " + message)

    def on_close(self):
        self.clients.remove(self)
        print("WebSocket closed")

application = tornado.web.Application([
    (r"/websocket", WebSocketHandler),
])

if __name__ == "__main__":
    application.listen(8888)
    print("WebSocket server started at port 8888")
    tornado.ioloop.IOLoop.instance().start()

客户端代码示例（JavaScript）

<!DOCTYPE html>
<html>
<head>
    <title>Real-Time Monitoring System</title>
    <script>
        var socket = null;

        function connect() {
            socket = new WebSocket("ws://localhost:8888/websocket");
            socket.onopen = function() {
                console.log("WebSocket connected");
            };
            socket.onmessage = function(event) {
                console.log("Received message: " + event.data);
                document.getElementById("status").innerHTML = event.data;
            };
            socket.onclose = function() {
                console.log("WebSocket closed");
            };
        }

        function closeWebSocket() {
            if (socket) {
                socket.close();
            }
        }
    </script>
</head>
<body>
    <button onclick="connect()">Connect</button>
    <button onclick="closeWebSocket()">Close</button>
    <div id="status"></div>
</body>
</html>

WebSocket常见问题与解决方法

在开发WebSocket应用时，可能会遇到一些常见的问题，这些问题可以通过以下方法解决。

常见错误及解决方案

WebSocket握手失败：检查握手请求和响应头字段是否正确，特别是Upgrade、Connection和Sec-WebSocket-Key等头字段。
连接断开：检查网络连接是否正常，避免频繁的网络波动导致连接断开。
消息丢失：确保消息传输过程中没有丢失，可以使用心跳机制来保持连接活跃。

示例代码：解决握手失败问题

import websocket

def on_message(ws, message):
    print("Received message: %s" % message)

def on_error(ws, error):
    print("Error: %s" % error)
    if error == "handshake error":
        print("WebSocket handshake failed")

def on_close(ws):
    print("WebSocket closed")

if __name__ == "__main__":
    ws = websocket.WebSocketApp("ws://localhost:8888/websocket",
                                on_message=on_message,
                                on_error=on_error,
                                on_close=on_close)
    ws.run_forever()

性能优化技巧

心跳机制：通过定时发送心跳消息来保持连接活跃。
消息压缩：通过压缩消息来减少传输数据量。
负载均衡：使用负载均衡技术来分发WebSocket连接，提高系统的可用性。

示例代码：心跳机制

var socket = null;
var pingInterval;

function connect() {
    socket = new WebSocket("ws://localhost:8888/websocket");
    socket.onopen = function() {
        pingInterval = setInterval(function() {
            socket.send("ping");
        }, 30000); // 发送心跳消息，每30秒一次
    };
    socket.onmessage = function(event) {
        if (event.data === "pong") {
            console.log("Received pong");
        } else {
            console.log("Received message: " + event.data);
        }
    };
    socket.onclose = function() {
        clearInterval(pingInterval);
        console.log("WebSocket closed");
    };
}

function sendMessage() {
    if (socket) {
        var message = document.getElementById("message").value;
        socket.send(message);
    }
}

function closeWebSocket() {
    if (socket) {
        socket.close();
    }
}

安全性注意事项

SSL/TLS加密：使用SSL/TLS协议加密传输的数据，防止数据被窃听。
身份验证和授权：实现身份验证和授权机制，确保只有合法用户可以访问WebSocket资源。
防止恶意攻击：防止恶意用户发送恶意数据或发起攻击，确保WebSocket连接的安全。

示例代码：SSL/TLS加密

import tornado.ioloop
import tornado.web
import tornado.websocket
import ssl

class WebSocketHandler(tornado.websocket.WebSocketHandler):
    clients = set()

    def open(self):
        self.clients.add(self)
        print("WebSocket opened")

    def on_message(self, message):
        print("Received message: %s" % message)
        self.write_message("Echo: " + message)

    def on_close(self):
        self.clients.remove(self)
        print("WebSocket closed")

application = tornado.web.Application([
    (r"/websocket", WebSocketHandler),
])

if __name__ == "__main__":
    ssl_options = {
        "certfile": "path/to/cert.pem",
        "keyfile": "path/to/key.pem"
    }
    application.listen(8888, ssl_options=ssl_options)
    print("WebSocket server started at port 8888 with SSL/TLS")
    tornado.ioloop.IOLoop.instance().start()

通过以上内容，您可以全面了解WebSocket的工作原理、开发环境搭建、基础代码示例、应用案例以及常见问题与解决方法。希望这些信息能帮助您更好地开发WebSocket应用。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕勒3428872

手记
篇

粉丝

13

获赞与收藏

51

关注作者，订阅最新文章

阅读免费教程

Html5 入门教程

25个小节 60143 815

JavaScript 入门教程

80个小节 312460 2199

Hibernate 入门教程

29个小节 6360 93

HTTP 入门教程

28个小节 37784 648

推荐

评论

收藏

共同学习，写下你的评论



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

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

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

支付方式

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

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

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

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

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

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

作者：

免费赠送

兑换码：1111222211 复制

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

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

热搜

最近搜索清空

WebSocket资料：初学者快速入门指南

握手过程代码示例

服务器端代码

客户端代码

创建WebSocket服务器端代码（Python + Tornado）

创建WebSocket客户端代码（JavaScript）

Python + Tornado示例

Java + Spring Boot示例

Python示例

JavaScript示例

Python客户端发送消息

JavaScript客户端发送消息

服务器端代码示例（Python + Tornado）

客户端代码示例（JavaScript）

服务器端代码示例（Python + Tornado）

客户端代码示例（JavaScript）

服务器端代码示例（Python + Tornado）

客户端代码示例（JavaScript）

示例代码：解决握手失败问题

示例代码：心跳机制

示例代码：SSL/TLS加密

阅读免费教程