WebAPI

MDN.WebSocket官方传送门：https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket
作用：WebSocket 对象提供了用于创建和管理 WebSocket 连接，以及可以通过该连接发送和接收数据的 API。
使用前先需要new一个构造函数，使用 WebSocket() 构造函数来构造一个 WebSocket。

var aWebSocket = new WebSocket(url [, protocols]);

示例

<body>
    <button id="connect">连接服务端</button>
    <button id="send" disabled="true">发送数据给服务端</button>
    <span id="recv"></span>
    <script>
        var connect=document.querySelector('#connect')
        var send=document.querySelector('#send')
        var recv=document.querySelector('#recv')
        let socket=null 
        connect.onclick=function(){
            socket = new WebSocket('ws://localhost:9998');
            socket.onopen = function(event) {
                send.disabled=false
                console.log("连接服务器成功了");
            };
            socket.onclose = function(event) {
                console.log("连接服务器失败");
                send.disabled=true
            };
            socket.onmessage=function(even){
                console.log("服务端>客户端" )
                console.log(even)
                recv.innerHTML=even.data
            }
        }
        send.onclick=function(){
            socket.send("hello serve")
        }
    </script>
</body>

当然你也可以使用事件监听的方式来监听例如连接成功时、连接失败时、收到数据时、连接关闭时等等
示例

// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');

// Connection opened
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

// Listen for messages
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});

Node使用的ws包

GitHub传送门：https://github.com/websockets/ws
因为这些开发者是外国人，说的英语我也看不懂，只能用翻译加上自己的理解整理一下子了。
这个作者先吹嘘了自己的这个库有多么多么简单，而且速度还非常的块。然后作者说这个是放在服务器上(Node)上使用的，你要是放在浏览器前端他是不起作用的，也就是他这个库在WebSock中扮演客户端的角色然后你的前端想要去交互要用WebAPI的WebSocket，最后作者插了一句你要是想用相同的代码在node与浏览器无缝运行那么你要用其他的转换代码的包,例如:isomorphic-ws
作者写的文档虽然不是很多但是我也不会闲的蛋疼都抄下来。我在这里只会放几个基础案例，要是想要知道全部用法，请打开GitHub的传送门自己去看。

const WebSocket=require("ws")
const wss= new WebSocket.Server({
    port:9998
})
wss.on('connection',client=>{
    console.log("连接成功。。。。")
    // 客户端发给服务器的数据
    client.on('message',msg=>{
         console.log('我是服务器我收到了前端传输的数据'+msg)
         client.send("hello 客户端")//从后端发给前端的一条数据
    })

})

WebSockets API和node包的使用

WebAPI

Node使用的ws包

评论