WebScoket 实现

npm 安装 websocket 包

服务端代码

  1. 新建一个 js 文件,如: ws_server.js
  2. 引入 websocket 包,并且 new 一个 websocket server

    1
    2
    var WebSocketServer = require('ws').Server,
    wss = new WebSocketServer({port: 9999});
  3. 定义一个数组用来存放连接的用户

    1
    2
    // 连接池
    var clients = [];
  4. 监听 wss ,当有用户加入时,把该用户加入连接池,当某个用户发送消息当时候,循环连接池,把消息推送给每一位用户,当用户退出时,将其移出连接池

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    wss.on('connection', function (ws) {
    // 将该连接加入连接池
    clients.push(ws);
    ws.on('message', function (message) {
    console.log(message);
    // 广播消息
    clients.forEach(function (ws1) {
    if (ws1 !== ws) {
    ws1.send(message);
    }
    })
    });

    ws.on('close', function (message) {
    // 连接关闭时,将其移出连接池
    clients = clients.filter(function (ws1) {
    return ws1 !== ws
    })
    });
    });
  5. 使用 node 启动该服务

    1
    node ws_server.js
阅读全文
基于 Vue 脚手架遍历目录文件自动生成路由

require.context

你还可以使用 require.context() 方法来创建自己的(模块)上下文。

你可以给这个方法传 3 个参数:要搜索的文件夹目录,是否还应该搜索它的子目录,以及一个匹配文件的正则表达式。

webpack 会在构建的时候解析代码中的 require.context() 。

阅读全文
Linux 配置 Hexo + Git 环境

linux 源码包安装

  1. wget http://xxxx 获取源码包
  2. 解压,tar zxvf xxx.tar.gz
  3. ./configure –prefix=/usr/local/xxx 指定安装路径
  4. make 编译
  5. make install 安装
  6. 配置环境变量
    1
    vim /etc/profile

然后在文件的最后一行,添加下面的内容,然后保存退出。

1
export PATH=$PATH:/usr/local/git/bin

使用 source 命令生效。

1
source /etc/profile

阅读全文
移动端 px 适配

px 单位转 rem(移动端适配)

1
2
3
4
5
6
7
8
9
10
!function() {
function rem() {
let width = document.documentElement.clientWidth || document.body.clientWidth;
document.documentElement.style.fontSize = width / 7.5 + 'px';
//设置body字体大小,不影响body内字体大小
document.body.style.fontSize = '12px';
}
rem();
window.addEventListener('resize', rem, false);
}();
阅读全文
requestAnimationFrame

兼容低版本浏览器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
isRequestAnimationFrame() {
let lastTime = 0;
let vendors = ['webkit', 'moz'];
for (let i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {
window.requestAnimationFrame = window[vendors[i] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[i] + 'CancelAnimationFrame'] || window[vendors[i] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function (callback, element) {
let currTime = new Date().getTime();
let timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
let id = window.setTimeout(function () {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
}
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function (id) {
clearTimeout(id);
};
}
}
阅读全文
小程序开发记录

小程序开发中碰到的问题记录

  • 在json中配置usingComponents来引用组件需要使用相对路径
  • 引入本地数据需要使用相对路径
  • 引用图片需要使用绝对路径
  • 组件中使用properties来接收数据,需要定义接收数据的类型
  • catchtap会阻止冒泡事件,bindtap 不会阻止冒泡事件。点击事件需要获取到变量值,如当前的索引,可通过 data-index 传递数据,随后在 js 中通过 e.target.dataset.index 获取到
  • cover-image 和 cover-view 最好放到 camera,map 等标签内部,否则在真机上面有可能不显示
  • textarea 标签会覆盖在其他标签之上
  • 使用 button::after{ border: none; } 来去除边框
  • setData()为数组时,不能传入 i 为变量,只能写死i的值
    如果需要动态的设置数组中的某个值:
    1
    2
    3
    4
    this.data.arr[i] = xxx;
    this.setData({
    arr: this.data.arr
    })
阅读全文
HTML、CSS优化

能用 HTML/CSS 解决的问题就不要用 JS

导航高亮

可以用 class 来标识菜单是否选中,选中的 class 增加特殊样式,:hover 选择器可以用来表示鼠标悬浮的样式

鼠标悬浮时显示

使用 :hover 选择器实现

自定义 radio/checkbox 的样式

input 始终隐藏,通过设置 span.checkbox 的样式来实现自定义样式,通过 :checked 伪类更改选中状态的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
input[type=checkbox]{
display: none;
}
/* 未选中的 checkbox 的样式 */
.checkbox{
/* 具体实现 */
}
input[type=checkbox]:checked + .checkbox{
/* 具体实现 */
}
</style>
<label>
<input type="checkbox">
<span class="checkbox"></span>
</label>

阅读全文
let、const和var

let 和 const 新增了块级作用域

1
2
3
4
5
6
7
8
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[0]();//10
a[6](); // 10
阅读全文
JSON

JSON 的语法可以表示以下三种类型的值:

  • 简单值
  • 对象
  • 数组
阅读全文
媒体元素

HTML5 新增了两个与媒体相关的标签,分别是 audio 和 video。用法如下:

1
2
3
4
5
<!-- 嵌入音频 -->
<audio src="song.mp3" id="myAudio">Audio player not available.</audio>

<!-- 嵌入视频 -->
<video src="conference.mpg" id="myVideo">Video player not available.</video>
阅读全文
Algolia