html知识总结之WebSocket

这篇文章主要是总结之前学过的WebSocket的知识。

# WebSocket简介

WebSocket是HTML5中的新增功能,用于在一种单个TCP上面进行全双工通信的协议。使得客户端和服务端的数据交换变得简单,允许服务端主动向客户端推送数据,一次握手,持久性的连接,进行双向数据通信。

ws

# WebSocket使用

# 创建对象

var Socket = new WebSocket(url, [protocol] );

# 属性

  • readyState,连接状态(0-未建立,1-已建立,2-连接正在关闭,3-已关闭);
  • bufferedAmount,已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数;

# 使用事件

  • onopen,建立连接;
  • onmessage,客户端接收服务端消息;
  • onerror,通信错误;
  • onclose,连接关闭;

# 使用方法

  • send:发送数据;
  • close:关闭连接;

例如:

客户端设置:

<h2>WebSocket</h2>
<p>WebSocket测试中...</p>
<button onclick="WsStart();">运行WebSocket</button>
<button onclick="WsClose();">关闭WebSocket</button>
<div id="msg"></div>

<script>

    let msg = document.querySelector('#msg');
    let ws;

    function WsStart () {
        if ('WebSocket' in window) {
            // 打开一个ws服务
            ws = new WebSocket('ws://127.0.0.1:8888/');
            ws.onopen = function () {
                console.log('ws server is connected!');
                ws.send('hello,ws!')
            }
            ws.onmessage = function (event) {
                let reviceData = event.data;
                console.log('Revice data: ', reviceData);
                console.log('client is reviced!');
            }
            ws.onclose = function () {
                console.log('ws server is disconnected!');
            }
        } else {
            msg.innerText = '您的游览器不支持WebSocket!';
        }
    }

    function WsClose () {
        ws.close();
    }
</script>

服务器:

const WebSocketServer = require('ws').Server;
// 创建websocket服务器
const wss = new WebSocketServer({ port: 8888 });
// 连接开启,其他事件初始化
wss.on('connection', function (ws) {
    console.log('ws client connected');
    //接收客户端发送报文的事件
    ws.on('message', function (data) {
        console.log('client msg: ' + data);
        ws.send('Server Msg: Server is reviced!');
    });
    // 连接关闭事件
    ws.on('close', function (message) {
        //code
        console.log('client msg: ' + message);
        ws.send('Server Msg: ws client closed!');
    });
});
console.log('websocket server running at ws://127.0.0.1:8888/');

ws案例

ws案例

# 结语

虽然总结的不多,但是是对自己的一种交代,记录学习过的知识点,其实是一件很开心的事情。