zoukankan      html  css  js  c++  java
  • websocket入门1

    很好奇网页上的聊天是如何做到的查询使用的是websocket技术,

    秉着对技术的热爱学习起来

    关于websocket的讲解

    代码示例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>websocket</title>
        <style>
            div{
                200px;
                height:200px;
                border: solid 1px black;
            }
        </style>
    </head>
    <body>
        <!-- 输入内容 -->
        <input type="text" placeholder="请输入你的内容">
        <button>发送请求</button>
         <!-- 显示结果 -->
        <div></div>
    </body>
    <script>
        var input=document.querySelector('input');
        var button=document.querySelector('button');
        var div=document.querySelector('div')
        window.onload=function(){
           var socket=new WebSocket('ws://echo.websocket.org');
           socket.addEventListener('open',function(){
            //    当websocket连接成功的时候触发
             div.innerHTML='连接服务成功';
           })
           //按钮点击的时候将输入框里的值发送给服务
           button.addEventListener('click',function(){
                 var value=input.value
                 socket.send(value);
           })
           //接受websocket服务的数据
           socket.addEventListener('message',function(e){
                 console.log(e)
                 div.innerHTML=e.data
           })
        }
    </script>
    </html>
    
  • 相关阅读:
    leetcode165
    leetcode63
    leetcode92
    leetcode86
    捣鼓Haskell
    递归操作链表
    treap(堆树)
    贪心策略 — 分数背包
    LeetCode.21
    LeetCode.94
  • 原文地址:https://www.cnblogs.com/yaoliuyang/p/12852959.html
Copyright © 2011-2022 走看看