#导入MD文档图片#WebSocket的前后端使用

Posted 2021-08-24 歆冉

1. 我们为什么需要WebSocket?

初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？
答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。
举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。
这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用"轮询"：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。

轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。因此，工程师们一直在思考，有没有更好的方法。WebSocket 就是这样发明的。

WebSocket最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

2. 代码示例1

该案例实现功能是：由前端定时向后端发送消息

2.1 前端代码

// html
<div class="container">
  <button type="button">向服务器发送数据</button>
  <button type="button">关闭连接</button>
  <button type="button">重新建立连接</button>
  <div class="box"></div>
</div>
// js
<script>
    var btns = document.querySelectorAll(\'button\')
    var ws = null
    var box = document.querySelector(\'.box\')
    initWebSocket()

    function initWebSocket() {
        if (\'WebSocket\' in window) {
            // 建立连接
            ws = new WebSocket(\'ws://localhost:5000/\');
        } else {
            console.log(\'当前浏览器 Not support websocket\')
        }
        ws.onopen = function (data) {
            box.innerHTML += \'-----------连接成功-----------\' + \'<br>\'
            console.log(\'--连接建立成功了--\', ws)
        }

        ws.onerror = function (data) {
            box.innerHTML = \'-----------连接建立失败-----------\' + \'<br>\'
            console.log(\'--连接建立失败--\', ws)
        }

        // 接受服务器返回的消息
        ws.onmessage = function (params) {
            box.innerHTML += params.data + \'<br>\'
            console.log(\'数据\', params.data)
        }

        ws.onclose = function () {
            box.innerHTML += \'-----------连接已关闭-----------\' + \'<br>\'
            console.log(\'--连接已关闭--\', ws)
        }
        ws.onbeforeunload = function () {
            // 关闭连接
            ws.close()
        }
    }

    // 开发发送数据
    btns[0].onclick = function () {
        setInterval(() => {
            ws.send(\'今天天气很好\')
        }, 1000)
    }

    // 关闭连接
    btns[1].onclick = function () {
        ws.close()
    }

    // 重新连接
    btns[2].onclick = function () {
        initWebSocket()
    }
</script>

2.2 后端代码(基于node写的)

// 需要安装依赖 npm/cnpn install nodejs-websocket -S
var ws = require(\'nodejs-websocket\');
var server = ws.createServer(function (socket) {
  var count = 1;
  socket.on(\'text\', function (str) {
    // 在控制台输出前端传来的消息　　
    console.log(str);
    //向前端回复消息
    socket.sendText(\'服务器端收到客户端端发来的消息了！\' + count++);
  });

  socket.on(\'error\', error => {
    console.log(\'error\', error)
  })
}).listen(5000, function() {
  console.log(\'服务启动成功\')
});

2.3 核心代码说明

2.4 运行代码

1.前端直接打开页面即可
2.后端通过 node index进行开启服务即可

2.5 效果

点击\'向服务器发送数据\'按钮

此时浏览器上会每隔1秒钟收到服务器返回的数据

3.代码示例2

该案例实现功能是：由后端定时向前端发送消息

3.1 前端代码

// js
<script>
    var btns = document.querySelectorAll(\'button\')
    var ws = null
    var box = document.querySelector(\'.box\')
    initWebSocket()
    function initWebSocket() {
        if (\'WebSocket\' in window) {
            // 建立连接
            ws = new WebSocket(\'ws://localhost:5000/\');
        } else {
            console.log(\'当前浏览器 Not support websocket\')
        }
        ws.onopen = function (data) {
            box.innerHTML += \'-----------连接成功-----------\' + \'<br>\'
            console.log(\'--连接建立成功了--\', ws)
        }

        ws.onerror = function (data) {
            box.innerHTML = \'-----------连接建立失败-----------\' + \'<br>\'
            console.log(\'--连接建立失败--\', ws)
        }

        // 接受服务器返回的消息
        ws.onmessage = function (params) {
            box.innerHTML += params.data + \'<br>\'
            console.log(\'数据\', params.data)
        }

        ws.onclose = function () {
            box.innerHTML += \'-----------连接已关闭-----------\' + \'<br>\'
            console.log(\'--连接已关闭--\', ws)
        }
        ws.onbeforeunload = function () {
            // 关闭连接
            ws.close()
        }
    }

    // 开发发送数据
    btns[0].onclick = function () {
        // 其他地方和前面的案例代码都一样，只是这里不在用定时器，只需要发送一次消息即可
        ws.send(\'好好学习\')
    }

    // 关闭连接
    btns[1].onclick = function () {
        ws.close()
    }

    // 重新连接
    btns[2].onclick = function() {
        initWebSocket()
    }
</script>

3.2 后端代码(基于node)

var ws = require(\'nodejs-websocket\');
var server = ws.createServer(function (socket) {
    var count = 1;
    var timer = null
        socket.on(\'text\', function (str) {
        // 在控制台输出前端传来的消息　　
        console.log(str);
        // 定时向前端发送消息
        timer = setInterval(() => {
            //向前端回复消息
            socket.sendText(\'服务器端收到客户端端发来的消息了！\' + count++);
        }, 1000)
    });

  socket.on(\'error\', error => {
        // 清除定时器
        clearInterval(timer)
    console.log(\'error\', error)
  })
}).listen(5000, function() {
  console.log(\'服务启动成功\')
});

3.3 核心代码说明

3.4 运行代码

1.前端直接打开页面即可
2.后端通过 node index进行开启服务即可

3.5 效果

同上...

4. 最后

如有不当之处，欢迎指正，相互交流...