网站设计的图片互动营销案例分析

在开发一些前端页面的时候，总是能接收到这样的需求：如何保持页面并实现自动更新数据呢？以往的常规做法，是前端使用定时轮询后端接口，获取响应后重新渲染前端页面，这种做法虽然能达到类似的效果，但是依然有很多缺点，缺点就不在这里说了，感兴趣的小伙伴可以自行查阅一下。现在让我们回忆一下，我们有没有想过，是否有一种技术，服务器可以主动将数据推送给客户端进行渲染，而不再是客户端向服务器发出请求等待返回结果呢？接下来，让我们一起了解weboskcet。

websocket是HTML5规范的一个部分，它借鉴了socket的思想，实现了浏览器与服务器全双工通信，达到了即时通信的效果。websocket协议基于TCP协议实现，包含初始的握手过程，以及后续的多次数据帧双向传输过程，避免服务器频繁打开多个HTTP连接，从而能更好的节省服务器资源和带宽，提高工作效率与资源利用率

websocket的通信规范，首先浏览器通过HTTP协议发出websocket的连线请求，服务器进行响应，这个过程称为握手，握手完成后，客户端和服务器之间建立一个类似TCP的连接，使用websocket协议，从而实现它们之间的通信。

客户端的简单示例

// 创建websocket
var ws = new WebSocket("ws://www.example.com");

// 连接成功时触发
ws.onopen = function(e) {
    console.log("Connectiong open ...");
    // 发送消息
    ws.send("Hello WebSocket");
};

// 接收消息时触发
ws.onmessage = function(e) {
    console.log("Received Message: " + e.data);
    ws.close();
};

// 关闭连接时触发
ws.onclose = function(e) {
    console.log("Connection closed");
};

// 出现错误时触发
ws.onerror = function(e) {
    console.log("error");
};

服务端的简单示例

# 创建websocket服务端
from tornado.websocket import WebSocketHandler

class wsHandler(WebSocketHandler):
    # 保存连接的用户，用于后续推送消息
    connect_users = set()
    
    # 已与客户端建立连接
    def open(self):
        print("开启WebSocket opened")
        self.connect_users.add(self)

    # 关闭客户端连接
    def on_close(self):
        self.connect_users.remove(self)
    
    # 接收到消息
    def on_message(self, message): 
        self.write_message("接收到客户端的消息：{}".format(message))

    # 所有用户发送消息
    @classmethod
    def send_demand_updates(cls, message):
        # 使用@classmethod可以使类方法在调用的时候不用进行实例化
        # 给所有用户推送消息（此处可以根据需要，修改为给指定用户进行推送消息）
        for user in cls.connect_users:
            user.write_message(message)

    # 允许WebSocket的跨域请求
    def check_origin(self, origin):
        return True

if __name__ == "__main__":
    # 调用
    wsHandler。send_demand_updates("服务端发送给客户端的消息")