websocket前端的代码实现

最新推荐文章于 2024-07-27 14:51:42 发布

weixin_30752699

最新推荐文章于 2024-07-27 14:51:42 发布

阅读量256

点赞数

文章标签：网络前端 json ViewUI

原文链接：http://www.cnblogs.com/yibadejiu/p/9962589.html

版权

有时候我们要做一种实时展示数据的大屏展示页面，类似与京东双十一那种，

这时候数据交互该怎么写呢，使用ajax请求接口开定时器，不间断请求数据，这样做理论上可以，但是太消耗性能，基于这样的情况下

websocket就出现了

普通的ajax请求数据是单向的，也就是客户端（浏览器）主动像服务器发送请求，服务器响应，回传数据，展示页面！

websocket是双向的，建立链接之后，服务器数据发生变化，自动把数据推送过来，实现实时响应，展示页面！

实际效果如下：

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    var ws = new WebSocket('ws://121.40.165.18:8800');

    // 建立 web socket 连接成功触发事件 
    ws.onopen = function () {
        var json="{'a':'1','b':'2'}"
         ws.send(json);//可以给后台发送参数
    };

    //接收到消息的回调方法
    ws.onmessage = function (event) {
        alert('数据回来了额'+event.data)
        console.log(event.data);//后台不间断发送数据，持续接收。
    }

    //断开 web socket 连接成功触发事件
    ws.onclose = function () {
        alert("连接已关闭...");
    };
</script>
</html>

转载于:https://www.cnblogs.com/yibadejiu/p/9962589.html

weixin_30752699

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
websocket前端的代码实现

有时候我们要做一种实时展示数据的大屏展示页面，类似与京东双十一那种，这时候数据交互该怎么写呢，使用ajax请求接口开定时器，不间断请求数据，这样做理论上可以，但是太消耗性能，基于这样的情况下websocket就出现了普通的ajax请求数据是单向的，也就是客户端（浏览器）主动像服务器发送请求，服务器响应，回传数据，展示页面！websocket是双向的，建立链接之后，服务器...
复制链接

扫一扫