WebSocket菜鸟教程

WebSocket菜鸟教程

WebSocket菜鸟教程

看到这想必你了解了webscoket,基本文档原理就不提了！

这张图你能看明白吗？不能没事还有一张更简单的

搞懂这个图很关键，我们与人聊天不是在面对面聊天，其实在于服务器聊天，传统的http是客户端发起请求服务器响应请求，重点是服务器无法给客户端发起请求websocket说白了就是解决这个问题，第一张图轮询是每隔一段时间客户端就向服务器发起请求有没有小明发过来的问话，没有就再隔一段事件再问，这会造成服务器压力很大！！！

前言

手把手撸websocket,最近有需求需要用到websouket,之前没有接触完全小白，百度查资料很多，但是很无厘头（我是菜鸟）接下来一步一步代码完全搞定websocket到底是什么玩意，怎么实现服务器，对完全一点不了解这玩意一类同学会有很大帮助，比如我！

二、代码案例

1.html

简单直白在html中创建一个输入框，按钮，盒子

    <!-- 输入内容 -->
    <input type="text" name="" id="" placeholder="请输入内容">
    <!-- 发送请求 -->
    <button>发送</button>   
    <!-- 接收websocket服务得数据 -->
    <div></div>

1
2
3
4
5
6
7

给盒子一个简单样式

   <style>
        div{
            width: 300px;
            height: 200px;
            border: 1px solid #000;
            margin-top: 20px;
        }
    </style>
1
2
3
4
5
6
7
8

2.js部分

// 'ws://echo.websocket.org/'这个服务地址是websocket官方文档中的地址
// 不用纠结，后面下一个案例会把他换成自己的
这里只要是了解怎么个过程

  <script>
        var input=document.querySelector('input')
        var button=document.querySelector('button')
        var div=document.querySelector('div')
         // 'ws://echo.websocket.org/'这个服务地址是websocket官方文档中的地址
        // 不用纠结，后面下一个案例会把他换成自己的
        // 创建websocket服务地址
    const socket=new WebSocket('ws://echo.websocket.org/') 

    // 当与服务器连接成功出发open事件（websocket四大基本事件https://www.runoob.com/html/html5-websocket.html）

    socket.addEventListener('open',function(){
        div.innerHTML='连接服务器成功'
    })


    button.addEventListener('click',function(){
        var value=input.value
        console.log(value);
        socket.send(value)
    })

    socket.addEventListener('message',function(e){
        div.innerHTML=e.data
    })
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

这边省略一个关闭服务事件下个文章会写出来

该处使用的url网络请求的数据。

总结

创建完成会显示连接服务器成功

在input输入框中输入文字会在盒子中显示这样，基本的websocket服务器就能接收数据与发送数据了

下一篇文章会简单实现自己的websocket服务器，多窗口显示数据案例