怀抱观古今,寝食展戏谑。这篇文章主要讲述#导入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 核心代码说明
文章图片
3.4 运行代码
1.前端直接打开页面即可
2.后端通过 node index进行开启服务即可
3.5 效果
同上...
4. 最后【#导入MD文档图片#WebSocket的前后端使用】如有不当之处,欢迎指正,相互交流...
推荐阅读
- 几种常用设计模式的简单示例
- 讲透学烂二叉树(二叉树的笔试题:翻转|宽度|深度)
- Ant Design Pro V4.5 从服务器请求数据的坑(typescript版)#导入MD文档
- Vue实现原理(图文讲解)
- go开发游戏开服程序
- 鸿蒙内测三批直通车-51CTO HarmonyOS技术社区专属绿色通道开启
- C语言数组超详细解析
- win7系统的ie浏览器在线视频时笔记本出现白块怎样办
- 导致win7系统开机按f1的6大原因及处理办法