WebSocket+Node.js+dGram+Vue 入门级小系统

时间：2019-01-30 12:52:10 阅读：639 评论：0 收藏：0 [点我收藏+]

接了个基于UDP信号的实时可视化WebGIS系统项目,框架先搭起来:

一 udp和dgram

npm安装下面两个包:

const StringDecoder = require(‘string_decoder‘).StringDecoder;
const dgram = require(‘dgram‘);

主要接收代码如下:

var serverSocket = dgram.createSocket(‘udp4‘);
const decoder = new StringDecoder(‘utf8‘);
var ori_msg=‘‘
var decode_msg=‘‘

serverSocket.on(‘message‘, function(msg, rinfo){
    // decoder.write(Buffer.from([0xe4, 0xbd, 0xa0]));
    decode_msg=decoder.write(Buffer.from(msg))
    ori_msg=msg
    console.log(msg.length)
    console.log(msg)
//   serverSocket.send(msg, 0, msg.length, rinfo.port, rinfo.address);
});
serverSocket.on(‘error‘, function(err){
    console.log(err)
});
serverSocket.on(‘listening‘, function(){
    // console.log(err)
})
serverSocket.bind(6000)

打开对应端口号的udp发送端,可以接收到udp字节流数据

技术分享图片

二 WebSocket

npm安装这个包

const WebSocketServer = require(‘ws‘).Server

这里设置了一个全局变量,随时间递增,WebSocket后台将此变量和从udp接收到的字节流一同推送到前台,由于系统不需要向后台推送数据的功能,因此后台没有接收数据的事件.后台代码如下:

var msg=0
setInterval(add,1000)//每隔5秒 服务端向浏览器 推送消息

var wss = new WebSocketServer({ port: 9000 })
wss.on(‘connection‘, function (ws) {
    console.log(‘client connected‘)
});

function add(){
    msg++
    if(this.msg>1000){
        msg=0
    }
    wss.clients.forEach(function each(client) {
        client.send(msg+‘\n‘+ori_msg);
    });
}

三 Vue

Vue脚手架等等略过,这里用到的Vue,此处贴上主Vue页面的代码

<template>
    <h1>{{ msg }}</h1>
</template>

<script>
// import io from ‘socket.io‘
// import vue from ‘vue‘
export default {
  name: ‘HelloWorld‘,
  data () {
    return {
      msg: ‘还没收到‘
    }
  },
  methods: {
    change_msg (value) {
      this.msg = value
    },
    http_test () {
      this.$http.get(
        ‘http://localhost:8081/back‘
      ).then(res => {
        this.msg = res
      })
    }
  },
  mounted: function () {
    var that = this
    if (window.WebSocket) {
      console.log(‘支持‘)
    } else {
      console.log(‘不支持‘)
    }
    var ws = new WebSocket(‘ws://localhost:9000‘)
    ws.onopen = function () {
      console.log(‘open‘)
      ws.send(‘hello‘)
    }
    ws.onmessage = function (evt) {
      that.change_msg(evt.data)
      console.log(evt.data)
    }
    ws.onclose = function (evt) {
      console.log(‘WebSocketClosed!‘)
    }
    ws.onerror = function (evt) {
      console.log(‘WebSocketError!‘)
    }
  }
}
</script>

<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>