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

接了个基于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收到的是我们自己定义格式的字节流,在这里没有解译出来的必要,所以出现了后面的乱码.至此框架算是跑起来了,欢迎各位多提意见,一同进步!

原文地址:https://www.cnblogs.com/majaiyou/p/10337290.html

时间: 2024-11-08 23:34:13

WebSocket+Node.js+dGram+Vue 入门级小系统的相关文章

Vue Element+Node.js开发企业通用管理后台系统完整教程

资源获取链接:点击获取完整教程 Vue Element+Node.js开发企业通用管理后台系统 综合应用 Vue 和 Node 技术,基于 Element-UI 组件库搭建“小慕读书“的管理后台,通过 Node 实现了电子书上传和解析功能以及权限管理.课程对 Vue 和 Node 有较为深入的应用,不仅会教大家如何实现功能,更会讲解技术背后的原理,帮助大家做到举一反三.课程面向中高级开发者,提供完整的开发文档和API支持,让大家可以快速上手实战 准备阶段 准备工作 Nginx 服务器MySQL

Vue Element+Node.js开发企业通用管理后台系统

第1章 课程介绍介绍项目背景.达到的目标.技术栈和功能演示 第2章 课程分析课程分析 第3章 Vue进阶(上)对Vue的进阶知识进行讲解,包括$emit和$on.directive指令.组件化.Vue插件等相关内容. 第4章 Vue进阶(下)对Vue的进阶知识进行讲解,包括组件通信.过滤器.监听器.Vue2.6重要新特性等相关内容. 第5章 Element-UI入门对Element-UI的内容进行讲解,包括如何搭建Element-UI使用环境,如何使用插件快速集成Element-UI,并通过el

面向Web Cloud的HTML5 App开发实战:Browser&amp;HTML5&amp;CSS3&amp;PhoneGap&amp;jQuery Mobile&amp; WebSocket&amp;Node.js(2天)

如何理解Android架构设计的初心并开发出搭载Android系统并且具备深度定制和软硬整合能力特色产品,是本课程解决的问题. 课程以Android的五大核心:HAL.Binder.Native Service.Android Service(并以AMS和WMS为例).View System为主轴,一次性彻底掌握Android的精髓. 之所以是开发Android产品的必修课,缘起于: 1,     HAL是Android Framework&Application与底层硬件整合的关键技术和必修技

纯正商业级应用-Node.js Koa2开发微信小程序服务端

第1章 前言.导学与node.js如何理解Node.js?前端到底要不要学习Node.js?本课程能让你学到什么? 第2章 Koa2的那点事儿与异步编程模型Koa非常的精简,基本上,没有经过二次开发的Koa根本“不能”用.本章我们讲解Koa的重要特性,理解什么是洋葱模型?以及在KOA中如何进行异步编程?很多同学都了解以上知识点,但听完本章,你会有一些不一样的理解,比如:为什么要有洋葱模型?没有会怎样?Koa中间件一定是异步的吗? ... 第3章 路由系统的改造Koa-router需要进行一些改造

html5 websocket + node.js 实现网页聊天室

1 client:    socket.io server:   node.js +  express  + socket.io 一个简单的聊天室  demo,没有注册,内置了一些测试用户 2 client 关键代码 var socket = io.connect('http://localhost:8080'); socket.on('connect',function(){ console.log('connected to server'); socket.on('login succes

Windows下安装git+node.js+npm+vue

Windows下安装git+node.js+npm+vue放到统一大文件夹下....我的都在E:\Program Files\... 去csdn下载git http://download.csdn.net/detail/liuyigangliu/9765265安装 默认/百度经验 下载node.jshttps://nodejs.org/en/6.10版本 我用的 git查看版本号 是否安装成功$ node -v -- v6.10.0$ npm -v -- v3.10.10 去淘宝镜像安装vue(

node,js和vue.js的联合使用的小例子

1.本博客内容转发自http://www.cnblogs.com/zl-127/p/6543973.html. 2.配置好 node js环境 创建app.js文件,代码如下 var http = require("http"); var fs = require('fs'); var url = require('url'); http.createServer(function(request, response) { // 解析请求,包括文件名 var pathname = ur

websocket + node.js聊天系统

转:http://www.cnblogs.com/Wayou/p/hichat_built_with_nodejs_socket.html 前端一直是一块充满惊喜的土地,不仅是那些富有创造性的页面,还有那些惊赞的效果及不断推出的新技术.像node.js这样的后端开拓者直接将前端人员的能力扩大到了后端.瞬间就有了一统天下的感觉,来往穿梭于前后端之间代码敲得飞起,从此由前端晋升为'前后端'. 图片来自G+ 本文将使用Node.js加web socket协议打造一个网页即时聊天程序,取名为HiChat

面向Web Cloud的HTML5 App开发实战:Browser&amp;HTML5&amp;CSS3&amp;PhoneGap&amp;jQuery Mobile&amp; WebSocket&amp;Node.js(3天)

课程简介: 王家林老师(联系邮箱[email protected] 电话:18610086859 QQ:1740415547 微信号:18610086859) 22个HTML5主题一次性贯穿HTML5的一切技术: 一网打尽HTML5时代Device.(设备端).Browser(浏览器)和Cloud(浏览器)的所有技术: 以浏览器定制技术为基础,通晓HTML5+CSS3+PhoneGap+Web Socket +jQuery Mobile +Node.js等HTML5的六大核心技术: 最新研发的H