导入模块这些基础操作这里不进行赘述: 首先启动一个websocket服务端:
var ws = require('nodejs-websocket');
console.log('开始建立连接...')
let count = 0
ws.createServer(function (conn) {
conn.on('text', function (str) {
console.log('浏览器给服务端收到的信息为:' + str)
conn.sendText('服务器下发的内容=>'+str)
})
conn.on('close', function (code, reason) {
console.log('关闭连接', code, reason)
});
conn.on('error', function (code, reason) {
console.log('异常关闭', code, reason)
});
}).listen(8001)
console.log('WebSocket建立完毕');
然后再vue中使用的话类似下面这段代码:
<template>
<div class="hello">
<el-button @click="test">测试</el-button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
ws: window.WebSocket ? new WebSocket('ws://127.0.0.1:8001') : null
}
},
created () {
},
methods: {
test () {
this.ws.onopen = function () {
console.log('连接服务器成功!')
this.ws.send('startting...')
}
this.ws.onclose = function () {
console.log('服务器关闭')
}
this.ws.onerror = function () {
console.log('连接出错')
}
this.ws.onmessage = function (e) {
console.log(e.data)
}
this.ws.send('startting11111111111...')
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
|