websocket前后端通讯模拟
作者:admin 日期:2022-06-13前端VUE代码:
- test_ws() {
- // let websocket;
- let url = `ws://192.168.0.73:54000?id=888`;
- let websocket = new WebSocket(url,['token340987340697']);
- // 建立连接
- websocket.onopen = () => {
- // 发送数据
- console.clear();
- console.log("websocket发送数据中",websocket);
- websocket.send("发送数据!!!!!!");
- };
- // 客户端接收服务端返回的数据
- websocket.onmessage = evt => {
- console.log("websocket返回的数据:", evt.data);
- };
- // 发生错误时
- websocket.onerror = evt => {
- console.log("websocket错误:", evt);
- };
- // 关闭连接
- websocket.onclose = evt => {
- console.log("websocket关闭:", evt);
- };
- this.my_ws = websocket
- },
后端node.js+koa:
- app.ws.use((ctx, next) => {
- /* 每打开一个连接就往 上线文数组中 添加一个上下文 */
- ctxs.push(ctx);
- // console.log("🚀 ### ctx1",ctx.query.id)
- console.log("🚀 @@@@@@@@@@@", ctx.header["sec-websocket-protocol"])
- ctx.websocket.send("start!!!!"+_.random(999, 9999))
- ctx.websocket.on("message", (msg) => {
- console.log("🚀 ### msg2", msg.toString())
- if (ctx.query.id == '10001') {
- msg1.push(msg.toString())
- }
- if (ctx.query.id == '10002') {
- msg2.push(msg.toString())
- }
- /* for(let i = 0; i < ctxs.length; i++) {
- if (ctx != ctxs[i]) {
- ctxs[i].websocket.send(message)
- }
- } */
- });
- // 客户端主动断开链接时候用 可以先不管
- ctx.websocket.on("close", (message) => {
- console.log(ctx.query.id,"🚀 ### close###########")
- console.log(msg1);
- console.log('---------------');
- console.log(msg2);
- /* 连接关闭时, 清理 上下文数组, 防止报错 */
- let index = ctxs.indexOf(ctx);
- ctxs.splice(index, 1);
- });
- });
关于faker.js,中文化/删库后地址/国内镜像
作者:admin 日期:2022-05-31vue2实现Teleport,用来做跨组件DOM挂载
作者:admin 日期:2022-04-20父组件调用:(to="#app"的意思是把#divPopup挂载到#app节点上)
- <Teleport to="#app">
- <div id="divPopup" style="z-index:20000;" v-show="dialogVisible">
- <el-button @click="clickH1">yes</el-button>
- <el-button @click="clickH2">no</el-button>
- </div>
- </Teleport>
子组件:
- <script>
- export default {
- name: 'teleport',
- props: {
- /* 移动至哪个标签内,最好使用id */
- to: {
- type: String,
- required: true
- }
- },
- mounted() {
- document.querySelector(this.to).appendChild(this.$el)
- },
- destroyed() {
- document.querySelector(this.to).removeChild(this.$el)
- },
- render() {
- return <div>{this.$scopedSlots.default()}</div>
- }
- }
- </script>
一个帧动画--仿做
作者:admin 日期:2022-03-25json-server+mock.js构建vue/小程序均可用的mock体系
作者:admin 日期:2022-03-03
lodash的get函数来判断对象深处的空值,太有用了!
作者:admin 日期:2022-01-21- let arr = [
- {id:1,tit:'ttt1'},
- {id:2,tit:'ttt2',bb:{ cc:{dd:12} }},
- {id:3,tit:'ttt3',bb:{}},
- {id:5,tit:'ttt5',bb:{ cc:{dd:''}}},
- {id:6,tit:'ttt6',bb:{ cc:{dd:null}}},
- {id:7,tit:'ttt7'},
- ]
- _.each(arr, item=>{
- let flag = _.get(item, [ 'bb', 'cc', 'dd' ])
- if(flag){
- console.log(item)
- }
- })
在contenteditable的div中的段落文字中获取光标位置,并在光标处插入字符
作者:admin 日期:2021-12-23vue项目中的一个小需求如题,代码整理如下:
- <template>
- <el-container class="about">
- <el-main>
- <section class="bgBox">
- <h1>在诗句上任意位置点击,再点击“插入字符”按钮,即可在光标处插入字符</h1>
- <div class="h20"></div>
- <el-button type="primary" @click="insertChar">插入字符</el-button>
- <div class="h30"></div>
- <div class="edit" contenteditable>
- <p
- v-for="(item, index) in sentenses"
- :key="item"
- @click="getCurrentSent(index)"
- >
- {{ item }}
- </p>
- </div>
- </section>
- </el-main>
- </el-container>
- </template>
- <script>
- const insertStr = (soure, start, newStr)=>{
- return soure.slice(0, start) + newStr + soure.slice(start);
- }
- import { getTableList, uploadFile } from "@/api/system/api_user";
- export default {
- data() {
- return {
- current_sent: null,
- sentenses: [
- "凌波不过横塘路。但目送、芳尘去。",
- "锦瑟华年谁与度。月桥花院,琐窗朱户。只有春知处。 ",
- "飞云冉冉蘅皋暮。彩笔新题断肠句。若问闲情都几许。",
- "一川烟草,满城风絮。梅子黄时雨。"
- ]
- };
- },
- computed: { },
- methods: {
- getCurrentSent(index) {
- // 获取当前句子
- this.current_sent = index;
- },
- insertChar() {
- // 获取getSelection对象,这个对象有很多内容,自己找到有用的数据
- let select = window.getSelection();
- // 利用insertStr函数,在光标位置插入###三个字符
- let newSent = insertStr(
- this.sentenses[this.current_sent],
- select.anchorOffset - 1,
- "###"
- );
- // 更新sentenses数组视图
- Vue.set(this.sentenses, this.current_sent, newSent);
- }
- }
- };
- </script>
- <style lang="scss"></style>
纯CSS实现文字水波动画
作者:admin 日期:2021-10-11 moment定义日期针对苹果手机的一个小bug
作者:admin 日期:2021-05-08SVG异形边框及路径动画+CSS动画演示
作者:admin 日期:2021-03-19演示地址:
http://contactu.cn/2021/vue_svg_tweenmax_demo/index.html
- 根据窗体的width/height参数,自动计算生成SVG的path路径
- tweenmax+MorphSVGPlugin生成小光点绕路径环游的动画,tweenmax的CSS动画生成右下角的色彩变化
- VUE组件化,方便复用
snap.svg+vue实现圆形导航
作者:admin 日期:2020-11-24 vue-cli3引用snap.svg出现错误的解决办法
作者:admin 日期:2020-11-12- npm install snapsvg
- import Snap from 'snapsvg'
- npm install snapsvg-cjs
- import "snapsvg-cjs"
使用echarts地图,大屏实现“县乡级行政区划”数据展示的几个难点汇总
作者:admin 日期:2020-06-12某大屏展示项目中,要实现“点击乡级区划,显示出相应的数据”,
最终效果,链接:http://258754.cn/2020/guidong/demo.html
经过几天的学习,解决了一些疑难问题,特汇总如下以供参考:
难点 | 解决方法 | 参考文章或链接 |
echarts地理图的基础实现-基于geojson | 参考了百度官方示例-香港地图 | https://echarts.apache.org/examples/zh/editor.html?c=map-HK |
外框发光效果实现 | geo--itemStyle | |
得到县一级的geojson数据 | 很多方法得到,本处给出一个很方便的工具 | https://gallery.echartsjs.com/editor.html?c=x4snrWXFGe |
网上公开的geojson数据,免费只到县一级,没有乡镇一级地图 |
1、自己手工绘制,比较粗糙,边界不准 2、找到了精确边界数据的购买渠道,很便宜 |
geojson.io这个网站可以手工绘制区块 |
买到的 geojson数据比较旧,今年度新的区划已经发生了合并。 |
使用mapshaper.org提供的工具,对区划进行了合并,完美解决了问题。
合并操作及控制台语法花了点时间。 |
解析贴: |
同一页面展示多个图表 | vue组件将地图封装了一下 | 查看本文源码 |
解决了以上主要问题,绘制类似地图,就只剩一些细节问题了。
本文同时发布到两处:
知乎专栏《低水平前端》:https://zhuanlan.zhihu.com/c_1040198727197237248
SVG制作不规则链接热点的最简版演示
作者:admin 日期:2019-02-28这就是个最简演示,其它常用技术就不解释了。
演示地址 :
http://www.contactu.cn/2016/svg/qg.html