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

怀抱观古今，寝食展戏谑。这篇文章主要讲述#导入MD文档图片#WebSocket的前后端使用相关的知识，希望能为你提供帮助。
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 核心代码说明