在 WebSocket 中处理二进制文本

我厂产品中有个需求,要用 WebSocket 接收很长的一段文本。生产环境中发现,有些内容发送时会失败,经查,是服务器端进行文本转换时,特殊字符处理存在一些问题。于是决定改为直接发送二进制流,我这边也要修改。开始以为要处理 ArrayBuffer,人工转换,后来经过一些摸索找到方法,记录一下。

我厂产品中有个需求,要用 WebSocket 接收很长的一段文本。生产环境中发现,有些内容发送时会失败,经查,是服务器端进行文本转换时,特殊字符处理存在一些问题。于是决定改为直接发送二进制流,我这边也要修改。

开始以为要处理 ArrayBuffer,人工转换,后来经过一些摸索找到方法,记录一下。

const socket = new WebSocket('wss://mydomain.com/path/to/api');
socket.binaryType = 'arraybuffer';
socket.onmessage = event => {
  const decodedString = new TextDecoder('utf-8').decode(event.data);
  // go on
}

其实很简单,主要用到原生类 TextDecoder,并且配置 WebSocket 以二进制文档流的方式来处理返回的数据。 

尬聊会:第13期

回顾本周群内分享内容,然后又聊了一些前端学习方面的内容。

兰卡威跳岛

回顾本周群内分享内容:

  1. 如何提问的技巧 張鑫旭
  2. Build an Excel add-in using Vue
  3. Did you know that style and script tags can be set to display: block?
  4. 使用 Pug 和 Stylus 开发小程序的 watch 脚本
  5. https://gradientjoy.com/ 这个网站很有意思,生成一个随机的渐变图,可以用来当背景或者 placeholder
  6. 纯 CSS 的 tab 页切换

然后又聊了一些前端学习方面的内容。

继续阅读“尬聊会:第13期”

尬聊会:第十二期

尬聊会第12期,讲解了一个纯CSS组件的实现。

视频在此:尬聊会第12期 控件实现/适应行业的发展

时间:2018-07-22 21:45
地点:我的斗鱼直播间 douyu.tv/meathill
回看视频:http://blog.meathill.com/share/galiao-12.html

0. pure css elastic toggle 实现讲解

  1. <label>for 属性和表单元素的 id 对应
  2. :checke + label
  3. transition
  4. overflow: hidden
  5. position: relative/absolute
  6. cubic-bezier

2. 再聊一下行业对我们的要求

  1. 工作6年 -> 普通工程师?
  2. 应该是高级工程师,或技术经理,甚至技术总监

广告时间

2018-08-08晚 8 点,给大家分享我的私活儿技巧:一起挣外快吧——环境搭建+万能的WP+前端如何玩转WP

地址:SegmentFault 讲堂 https://segmentfault.com/l/1500000015754431/

作为一名程序员,我们最常被亲朋好友问到的问题应该是:你会修电脑么?不对,是“你会做网站么?”

对于我们前端来说,写个页面不在话下;可是一个网站,光有前端是不够的,服务器和 API 怎么解决呢?找外援么?我想大家都更愿意自己来吧。

这次分享,我希望教会大家以下技能:

  1. 本地开发环境的配置(基于 Windows 10 Linux Subsystem)
  2. 云服务器的购买和配置
  3. LNMP 环境搭建,安装 WordPress
  4. WordPress 主题开发
  5. 利用 WordPress Ajax API 作为数据接口

基本上,学会这些之后,你就可以在外面接活儿做网站了。希望大家都能借此丰富技能树、挣到更多的钱。

其实,即使不考虑接私活儿挣钱,我也建议前端同学学习一下服务器配置和后端开发的相关知识,对我们理解整个技术体系、业务流程都有巨大帮助。毕竟一座高塔必须坚实而又宽广的底座才能建成。


早鸟政策

  1. 即日起至7月31日,5折
  2. 8月1日至8月5日,75折
  3. 8月6日至开播前,88折
  4. 之后恢复原价

实录地址:

2018-07-29 尬聊会 第12期实录


欢迎加入肉山小课堂一同学习,QQ 群:肉山小课堂答疑交流群 628056148,SF 圈子:肉山小课堂继续深造中心

解决 PHP 7.2.8 + MySQL 8.0.12 连接失败的问题

今天花3个小时解决了一个升级 PHP + MySQL 导致的连接问题,最后用 caching_sha2_password 插件解决的。

这两天又反复遇到这个问题,先写解决方案:

1. 使用 caching_sha2_password  插件

修改用户密码,并且用插件生成,可以解决 WordPress 的问题。

ALTER USER 'user'@'localhost' IDENTIFIED WITH caching_sha2_password BY 'password';

2. 修改 my.cnf,使用原生密码

使用 Laravel + MySQL 8.0 的时候,遇到

SQLSTATE[HY000] [2054] The server requested authentication method unknown to the client

修改 /etc/mysql/my.cnf (我是 Ubuntu 16.04),添加下面一行:

[mysqld]
default_authentication_plugin= mysql_native_password

然后重置密码:

ALTER USER 'user'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';
继续阅读“解决 PHP 7.2.8 + MySQL 8.0.12 连接失败的问题”

新直播预告+腾讯云拼团

新直播《一起挣外快吧——环境搭建+万能的WP+前端如何玩转WP》将于 2018-08-08 晚8点在 ttps://segmentfault.com/l/1500000015754431 开播,欢迎大家前来学习,一期发发发。

最近比较忙,所以就把不那么紧急的事儿往后放了。原本计划每月直播至少一次,眼看七月份已经快过完了,只好赶紧找个话题。想来想去,可能只有“挣外快”这个话题既吸引人又不需要我花太多时间准备,毕竟从 2016 年离职到现在我净帮人搭网站了。

所以,就有了这个直播:

一起挣外快吧——环境搭建+万能的WP+前端如何玩转WP

时间:2018-08-08 晚8点

作为一名程序员,我们最常被亲朋好友问到的问题应该是:你会修电脑么?不对,是“你会做网站么?”

对于我们前端来说,写个页面不在话下;可是一个网站,光有前端是不够的,服务器和 API 怎么解决呢?找外援么?我想大家都更愿意自己来吧。

这次分享,我希望教会大家以下技能:

  1. 本地开发环境的配置(基于 Windows 10 Linux Subsystem)
  2. 云服务器的购买和配置
  3. LNMP 环境搭建,安装 WordPress
  4. WordPress 主题开发
  5. 利用 WordPress Ajax API 作为数据接口

基本上,学会这些之后,你就可以在外面接活儿做网站了。希望大家都能借此丰富技能树、挣到更多的钱。

继续阅读“新直播预告+腾讯云拼团”

2018款 XPS-13 使用体验:优点缺点和一般点

三个月的使用后,我认为,这款笔记本外观几乎无可挑剔,非常非常有使用欲。但是内功毛病很多,用起来又让人觉得不够爽。如果你预算充足的话,可以考虑这款;不然的话,可能老款更合适。

大约三个月前,我偶然发现官网 2018 款 XPS-13 直降 3000,遂下单一台,当时还写了篇开箱文。如今三个月过去,期间差不多有一半时间使用新本,所以准备再写一篇使用体验。

就按传统的优点缺点一般点来写吧。

继续阅读“2018款 XPS-13 使用体验:优点缺点和一般点”

小米转接头与 XPS13 不兼容

小米 USB-C 至 HDMI 多功能转换器与 XPS-13 + Windows 10 存在兼容性问题。

之前为了笔记本连接到显示器,买了一个小米的 USB-C 至 HDMI 多功能转接器,放了很久,这两天拿出来用,结果电脑开始出项各种诡异的问题:

  1. 不定时黑屏,很快就会恢复,不超过 0.1 秒
  2. 浏览器黑屏,滚屏或者其它触发重绘的操作,重绘部分正常,其它部分继续黑——Firefox 最严重
  3. 网易云音乐 UWP, 播放“发现音乐”的歌单会导致其重启,播放“我的最爱”歌单没问题
  4. 从睡眠中唤醒无法找到任何 WiFi,只能重启

拔掉后正常,初步估计是视频转换导致的,但是不确定是哪里的问题,可能是:

  1. Dell XPS-13
  2. 小米转换器
  3. Windows 10 最新版

总之有类似问题的同学建议换一个。

Promise 改造 child_process.exec

`util.promisify(child_process.exec)` 得到的函数无法获取 `exit code`,所以我重新封装了一下。

child_process 是 Node.js 的一个内建模块,用于分裂出(spawn)一个子进程,执行一些特定操作。.exec() 是它的方法,接受一个参数,即要执行的 shell 命令,然后通过回调返回结果。.exec().spawn() 的不同之处在于,前者重在返回结果,后者则重在返回内容。所以当你需要执行一个命令,你并不关心执行过程中发生了什么,只要看到结果就好,那么就用 .exec();反之,假如执行过程中产生的信息对你特别有价值,你并不是特别在意结果,就应该用 .spawn()

另外,我之前在《Node.js 8 中的 util.promisify》中介绍过,Node.js 8 引入了一个新函数,位于 util 模块,叫做 promisify(),用于将回调风格的 Node.js 函数改造成 Promise 规范的函数。

OK,背景知识介绍结束。近期开发中,我需要执行一个命令,并且取得它的 stdoutstderrexit code,使用 promisify() 之后发现没有 exit code,于是只好重新写了一下,代码如下:

import {exec as BaseExec} from 'util';

function exec(command, options) {
  return new Promise((resolve, reject) => {
    let result = {};
    const cp = baseExec(command, options, (err, stdout, stderr) => {
      if (err) {
        err.stdout = stdout;
        err.stderr = stderr;
        reject(err);
        return;
      }

      result.stdout = stdout;
      result.stderr = stderr;
      if ('code' in result) {
        resolve(result);
      }
    });

    cp.on('exit', (code, signal) => {
      result.code = code;
      result.signal = signal;
      if ('stdout' in result) {
        resolve(result);
      }
    });
  });
}

希望对大家有用。

新键盘到了,FC660C,静电容,试用一下,效果还不错。略硬,段落感不强,声音不大。

尬聊会:第十一期

尬聊会第11期实录。介绍了学会背锅学会汇报;变黑锅为机会;纯CSS校验表单的相关知识。

视频在此:尬聊会第11期 学会背锅学会汇报=升职加薪/变黑锅为机会/纯CSS校验表单

时间:2018-07-01 20:45
地点:我的斗鱼直播间 douyu.tv/meathill
回看视频:http://blog.meathill.com/share/galiao-11.html

0. 学会背锅,学会汇报——升职加薪的阶梯

我们(80s)被教育要谦虚谦逊低调,隐藏自己的真实想法和目标。

在学校

  1. 不主动当班干部
  2. 不主动加入学生组织

职场上

  1. 我们保证自己能够决定自己的得失
  2. 确保你处在一个健康的商业环境里

如何判断当前的商业环境是健康的,还是不健康的呢?

  1. 看这家公司是“规矩”大,还是“老板的态度”大

学会汇报

  1. 周期,按时提交报告
  2. 确定里程碑时间点
  3. 报告里要尽量携带数字
  4. 结案的时候一定要主动汇报

1. 如何防止产品在临时上线前突然地改需求(这个需求可能是功能也可能是UI交互)?

  1. 作为前端,有必要理解产品和需求
  2. 在开发的时候,保持自己思路跟着产品走,力求从中发现问题
  3. 如果产品上线之前,环境发生了比较大的变化,就坦然接受

2. 表单验证

学习正则

正则表达式30分钟入门教程 http://deerchao.net/tutorials/regex/regex.htm

codepen

MDN:https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown

实录地址:

2018-07-01 尬聊会 第11期实录


欢迎加入肉山小课堂一同学习,QQ 群:肉山小课堂答疑交流群 628056148,SF 圈子:肉山小课堂继续深造中心

代友内推:【北京】【教育】【前端】【上市公司】

朴新环球教育
招聘前端开发工程师

[工作职责]

  1. 负责公司业务项目(后台系统)的前端界面开发和逻辑实现;
  2. 根据产品需求,实现产品界面和交互功能,页面维护及性能优化;
  3. 负责现有产品的持续改进

[任职资格]

  1. 2年以上Web前端开发经验,计算机相关专业优先
  2. 熟练掌握HTML5、CSS3、JavaScript、jQuery等,有较强的代码能力
  3. 熟练使用至少一种JS框架,熟练Reactjs、Angular、Vue等,能独立开发常用组件
  4. 对前端工程化、模块化开发有一定了解,熟悉 gulp, webpack等,有开发经验优先
  5. 熟悉Java,node等后端技术优先 ;
  6. 善于沟通,工作积极主动,责任心强,具备良好的团队协作能力。

薪资open 面谈
联系人王军武 ‭136 9100 7757‬
邮箱 wangjunwu@pxjy.com