什么是WebSocket,以及H5中websocket的简单应用

最新推荐文章于 2023-11-23 16:45:52 发布

_阿锋丶

最新推荐文章于 2023-11-23 16:45:52 发布

阅读量424

点赞数 2

分类专栏： WebSocket

本文链接：https://blog.csdn.net/weixin_43342105/article/details/109096816

版权

WebSocket 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

WebSocket

WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455，并由RFC7936补充规范。WebSocket API也被W3C定为标准。

WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

H5中websocket的简单应用

在这里插入图片描述
这里创建一个websocket对象时，传了一个地址，这个地址是可以自己开发的

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            position:absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            border: 2px solid;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="输入内容"/>

    <button>发送请求</button>

    <div>

    </div>

    <script>
        let input = document.querySelector('input')
        let btn = document.querySelector('button')
        let div =document.querySelector('div')


        // 创建websocket对象
        var socket = new WebSocket('ws://echo.websocket.org')

        // open:WebSocket服务连接成功时触发
        socket.addEventListener('open',function(){
            div.innerHTML = '连接服务成功了'
        })

        //将输入框的输入消息  发送给websocket 
        btn.addEventListener('click',function(){
            var value = input.value
            socket.send(value)
        })

        // 接收webSocket服务的数据
        socket.addEventListener('message',function(e){
            console.log(e);
            console.log(e.data);
            div.innerHTML = e.data
        })

        // close是服务断开时产生的事件
        socket.addEventListener('close',function(){
            div.innerHTML = '服务断开链接'
        })

    </script>
</body>
</html>

_阿锋丶

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
什么是WebSocket,以及H5中websocket的简单应用

WebSocketWebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455，并由RFC7936补充规范。WebSocket API也被W3C定为标准。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。HTML5定义了WebSocket协议，能更好的节省服
复制链接

扫一扫