websocket 实现前后端数据实时推送

学无止境gwx

已于 2022-03-11 11:48:27 修改

阅读量4.1k

点赞数 1

分类专栏： web后端文章标签： python

于 2021-07-24 00:15:12 首次发布

本文链接：https://blog.csdn.net/weixin_49278803/article/details/119046805

版权

一、web端数据实时刷新方案？

1、ajax轮询，前端使用定时器，定时向后端接口请求数据，但是实时性不够，且造成的服务器压力较大。
2、websocket，双向连接并能够保持长连接，缺点是有些浏览器不支持。
注：websocket是H5开始提供的一种在单个TCP连接上进行全双工通讯的协议，不同于http协议：请求响应后就释放，无法保持长时间的连接，也不能实时的主动将消息推送给客户端。websocket是对http协议的升级,升级后可以相互发送信息。
3、就目前而言，从一个全局考虑，此文章以讲解websocket为主

二、应用场景

聊天室
直播弹幕
实时数据更新
。。。

三.代码

前端
①思路：
构造websocket连接握手(常规html页面直接引入，vue的话需要下载vue-websocket包：https://www.npmjs.com/package/vue-websocket)，http用ws，https需要用wss。
②优化选项：
心跳检测及自动重连机制，当网络断开或者后端服务问题造成客户端 websocket 断开，程序会自动尝试重新连接直到再次连接成功
③用到的函数：
onopen：连接成功
onerror：连接失败
onmessage：接收到消息调用
onclose：关闭连接
④转换：
web后端返回的数据，需要用JSON.parse转成前端对象。typeof查看前端数据类型

以常规H5演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
    
            width:200px;
            height:200px;
            border:1px solid#000000;
        }
    </style>
</head>
<body>
    <div>hello world</div>
    <input type="text" placeholder="请输入你的内容">
    <button>发送弹幕</button>
</body>
</html>
<script>
    if ("WebSocket" in window){
    
        var ws = new WebSocket("ws://127.0.0.1:8088");
        var button = document.querySelector("button");
        var input = document.