@holytiny/wxmp-socket.io-client

这个项目是微信小程序环境下Socket.IO的客户端。

与Socket.IO-client完全兼容，支持微信小程序环境下多websocket链接。

使用

npm install @holytiny/wxmp-socket.io-client --save

在使用webpack等打包程序的微信小程序Framework中

例如在支持webapck打包的uni-app等小程序Framework中。

// 下面代码可以使能debug输出，看到通信的交互过程
import Debug from 'debug';
Debug.enable('*');
const io = require('@holytiny/wxmp-socket.io-client');
// or with import syntax
import io from '@holytiny/wxmp-socket.io-client';
let socket = io('http://localhost', {
  // 显式指定websocket传输层
  transports: ['websocket']
});

在支持npm的微信小程序开发环境中

因为微信小程序开发环境的npm打包工具不支持node.js的标准库打包，因此必须使用预先打包的程序。

// 下面代码可以使能debug输出，看到通信的交互过程
import Debug from 'debug';
Debug.enable('*');
const io = require('@holytiny/wxmp-socket.io-client/socket.io');
let socket = io('http://localhost', {
  // 显式指定websocket传输层
  transports: ['websocket']
});

具体使用请参考Socket.IO-client的文档

注意

接口兼容的Socket.IO-client版本：2.3.0。
只支持websocket传输层，需要在初始化的时候显式指定。
具体在微信小程序开发环境下的使用，可以参考本项目的测试用例代码。

源码相关

可以在wxmp-socket.io-client/目录下运行npm run help查看可以运行的脚本。

打包程序

在wxmp-socket.io-client/dist目录下，*.dev.js版本是有.map的程序，带有.slim.版本是删除了debug输出的版本。在wxmp-socket.io-client/目录下运行npm run build，可在wxmp-socket.io-client/dist/目录下获得打包后的代码。

测试用例

测试用例程序在微信小程序环境下测试了除微信小程序环境不支持的功能（例如Blob）之外，所有原socket.io-client的测试用例。

手动运行测试用例

首先运行server.js程序建立测试服务器。进入wxmp-socket.io-client/test-wxmp/support目录，然后运行：

node server.js

然后将程序wxmp-socket.io-client/test-wxmp/wxmp导入微信小程序开发环境，在微信小程序环境中 构建npm 后刷新。程序会自动执行connection测试用例。

当connection测试用例执行完成后，可以点击 Socket Test 按钮，对Socket进行测试。

当socket测试用例执行完成后，可以点击 WSS Test 按钮，对wss进行测试。此测试需要自行搭建服务器以及申请域名和进行备案。本测试环境为ubuntu 18.04，用nginx作为反向代理，将wss反向代理到本机的ws服务。可以参考wxmp-socket.io-client/test-wxmp/nginx.sh的脚本内容。

#!/usr/bin/env bash

SITE=holytiny.com

echo 'Install or update nginx...'
apt-get update
apt-get install -y nginx

echo 'config nginx...'
cp -f ./support/${SITE} /etc/nginx/sites-available/

echo 'clean current enbalbed sites...'
rm /etc/nginx/sites-enabled/*

echo 'enable holytiny.com...'
ln -s /etc/nginx/sites-available/${SITE} /etc/nginx/sites-enabled/

echo 'restart nginx...'
systemctl restart nginx

echo 'start nginx automatically...'
systemctl enable nginx

echo 'start socket.io wss test server...'
pm2 start -f ./support/server.js

nginx的配置文件在wxmp-socket.io-client/test-wxmp/support/holytiny.com，可以作为参考。

server {
  listen              443 ssl;
  listen              [::]:443 ssl;
  ssl_certificate     /var/webapp/TowerMonitor/backend/support/holytiny.com.pem;
  ssl_certificate_key /var/webapp/TowerMonitor/backend/support/holytiny.com.key;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;

  location / {
    proxy_pass http://localhost:3030/;
  }

  location /socket.io/ {
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_pass "http://localhost:3210/socket.io/";
  }
}

server {
  listen 80;
  listen [::]:80;
  return 301 https://$host$request_uri;
}

测试代码在wxmp-socket.io-client/test-wxmp/wxmp/test-cases/目录下。可以将测试代码作为应用参考。

自动运行测试用例

本项目采用了Jest和微信小程序的automator进行自动化测试。 Jest脚本位于wxmp-cocket.io-client/test-wxmp/jest/目录下。 Jest的配置脚本wxmp-socket.io-client/jest.config.js指定了运行Jest前使用.evn进行环境变量管理。

首先打开wxmp-socket.io-client/.env进行环境变量配置。

# cli path
#cli='C:/Program Files (x86)/Tencent/微信web开发者工具/cli.bat'
# Debug
#DEBUG=wxmp-socket.io-client:test

环境变量在Jest脚本中起的作用：

const automator = require('miniprogram-automator')
const path = require('path');
const debug = require('debug')('wxmp-socket.io-client:test');

const cli = process.env.cli || '/Applications/wechatwebdevtools.app/Contents/MacOS/cli';
debug('cli: ', cli);

然后打开微信小程序开发环境。

在命令行终端进入wxmp-socket.io-client目录后，执行npm run test:wxmp。

联系

欢迎在github上提issue。也欢迎邮件contact@holytiny.com。

维护人员

License

MIT