接了個基於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>

四 效果

執行後臺頁面代碼,開啟後臺服務

執行 npm run dev開啟前臺服務

在瀏覽器中輸入前臺對應網址,效果如下:

由前面的數字可以看出實時推送的效果,因為udp收到的是我們自己定義格式的字節流,在這裏沒有解譯出來的必要,所以出現了後面的亂碼.至此框架算是跑起來了,歡迎各位多提意見,一同進步!

WebSocket+Node.js+dGram+Vue 入門級小系統