共计 2054 个字符,预计需要花费 6 分钟才能阅读完成。
vue+node 应用 websocket
1. 开发环境 vue+node
2. 电脑系统 windows10 专业版
3. 在应用 vue+node 开发的过程中, 咱们常常会应用到 websocket, 上面我来分享一下如何应用, 心愿对你有所帮忙!
4.node 我的项目中终端中输出以下命令:
npm install nodejs-websocket
5. 在 node 我的项目对应的路由中增加如下代码:
var express = require('express');
var router = express.Router();
var ws = require("nodejs-websocket");
var timer;
var server = ws.createServer(function (conn) {console.log("New connection")
conn.on("text", function (str) {clearInterval(timer);
console.log("接管到客户端发来的音讯:" + str)
// 给客户端发消息
let a = 1;
let arr = [[20, 21, 22, 23, 20, 20, 18, 26],
[21.5, 20, 23, 25, 21, 24, 22, 28],
[22, 26, 35, 27, 26.3, 34, 35, 28],
[21.5, 20, 37, 29, 21, 27, 22, 28],
[21.5, 20, 39, 25, 42, 24, 27.5, 28],
[21.5, 24, 23, 25, 36, 24, 22, 45],
[21.5, 20, 23, 23, 21, 45, 22, 46],
[21.5, 27, 23, 35, 21, 37, 22, 28],
[21.5, 20, 24, 25, 21, 35, 22, 27],
[21.5, 20, 23, 25, 38, 24, 10, 28]
]
conn.sendText(str)
timer = setInterval(function () {
let obj = {zao: arr[Math.floor(Math.random() * 10)],
zhong: arr[Math.floor(Math.random() * 10)],
wan: arr[Math.floor(Math.random() * 10)],
a: str + a++
}
conn.sendText(JSON.stringify(obj))
}, 1000);
})
conn.on("close", function (code, reason) {console.log("Connection closed")
})
}).listen(8003)
module.exports = router;
6. 留神,node 我的项目的目录构造如下:
7.vue 代码如下:
<template>
<div class="about">
<h2> 我是 about 组件你 </h2>
</div>
</template>
<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
@Component({data() {
return {
path: "ws://192.168.137.63:8003/users",
socket: "",
};
},
mounted() {
let _this: any = this;
_this.init();},
methods: {init() {var ws = new WebSocket("ws://192.168.137.63:8003/users");
let _This:any=this;
ws.addEventListener("open", function (e) {console.log("连贯胜利!");
});
ws.onopen = function () {console.log("连贯胜利!");
ws.send("1");
};
ws.onerror = function () {console.log("链接谬误!");
};
ws.onclose = function (e) {console.log("断开链接!");
};
ws.onmessage=function (msg) {console.log("Message from server", JSON.parse(msg.data)); // 输入 后盾返回的数据
};
// 监听服务端推送过去的音讯
// ws.addEventListener("message", function (event) {// console.log("Message from server", JSON.parse(event.data)); //// 输入 后盾返回的数据
// });
},
}
},
destroyed() {
let _this: any = this;
// 销毁监听
_this.ws.onclose = _this.close;
},
})
export default class About extends Vue {}
</script>
8. 效果图如下:
9. 本期的分享到了这里就完结啦, 是不是很 nice, 心愿对你有所帮忙, 让咱们一起致力走向巅峰!
正文完