江苏龙网

  1. 主页 > 生活百科 > >

如何在小程序中实现 WebSocket 通信

WebSocket

在以前的文章中 ， 我们介绍了HTTP通讯 ， 这种通讯有一个缺点 ， 如果我想从直接从服务器发消息给客户端 ， 需要客户端先发起HTTP请求后服务器才能返回数据 ， 且后续服务器想发送数据给客户端都需要客户端先发起请求 ， 但这种方案在一些特殊场景应用的时候非常消耗资源 ， 比如聊天室 ， 如果使用HTTP请求 ， 需要客户端每隔一段时间就请求一次服务器 ， 再由服务器返回数据 。这种传统的模式带来很明显的缺点 ， 即客户端需要不断的向服务器发出请求 ， 然而HTTP请求可能包含较长的头部 ， 其中真正有效的数据可能只是很小的一部分 ， 显然这样会浪费很多的带宽等资源 。
在这种情况下 ， html5定义了WebSocket协议 ， 能更好的节省服务器资源和带宽 ， 并且能够更实时地进行通讯 。WebSocket只需要与服务器进行一次握手 ， 即可实现实时的数据连接 ， 并且传输协议是全双工的 ， 服务器可以随时主动向客户端发送数据 ， 并且WebSocket协议在连接创建后 ， 服务器和客户端之间交换数据时 ， 用于协议控制的数据包头部相对较小 ， 能明显降低服务器及客户端开销 。
我们的小程序也支持WebSocket通信 ， 如果你想为你的小程序实现聊天室、服务器推送、小程序之间数据交互等功能 ， 那就非常有必要搭建一个WebSocket服务器来进行WebSocket通讯 。这篇文章中 ， 我们将简单介绍小程序WebSocket通信使用方法 ， 并通过实例搭建一个WebSocket服务器 。实现小程序与服务器之间的通讯 。
在教程开始之前 ， 需要搭建搭建好小程序的基础开发环境 ， 关于如何配置 ， 大家可以参考如何入门小程序开发这篇文章的入门教程 。
服务器搭建既然要实现WebSocket通讯 ， 那必须要拥有一台WebSocket服务器 ， 服务端的环境有很多选择NodeJS、php、Python等大部分主流语言都可以部署WebSocket服务 ， 今天我们将教大家使用PHP语言进行环境部署 ， 其他语言请同学们自行部署 。
运行环境搭建我这里以Ubuntu Server 16.04 LTS为例 ， 我们需要安装php运行环境及NginxWeb服务 ， 同时也需要申请免费的SSL证书和域名 ， 关于证书和域名的申请注册请参考如何快速搭建微信小程序这篇文章 。注册完域名及证书申请 ， 我们就可以开始部署服务器了！首先 ， 登录服务器 ， 执行下面的命令 。
sudo apt updatesudo apt install php php-fpm php-curl nginx composer -y安装完成后 ， 使用浏览器访问你的服务器IP地址 ， 如果看到下面的内容 ， 则证明Web服务已经启动 。
 

如何在小程序中实现 WebSocket 通信

文章插图
 
img
因为小程序获取远程数据 ， 必须为HTTPS或WSS环境 ， 所以目前搭建的环境 ， 在小程序无法使用 ， 接下来 ， 我们将使用SSL证书加密小程序访问你服务器之间的流量 。这里就需要刚才注册的域名及证书了 。首先 ， 将下载的证书 ， 上传到你的服务器 ， 并记录下这个位置 。然后 ， 我们将配置Nginx服务 ， 以让其支持WSS流量 。
我们找到/etc/nginx/conf.d文件夹 ， 新建配置文件 ， 为了方便后续修改 ， 我将这里的配置文件修改为weixin.techeek.cn.conf大家可以根据自己的需求修改 。
cd /etc/nginx/conf.dsudo nano weixin.techeek.cn.conf在nano编辑器中 ， 我们写下下面的代码
server {listen 443 ssl;server_name weixin.techeek.cn;indexindex.php index.html index.htm;root /usr/share/nginx/html;ssl_certificate/home/ubuntu/1_weixin.techeek.cn_bundle.crt;ssl_certificate_key/home/ubuntu/2_weixin.techeek.cn.key;ssl_session_cacheshared:SSL:1m;ssl_session_timeout5m;ssl_ciphersHIGH:!aNULL:!MD5;ssl_prefer_server_cipherson;location ~ .php$ {fastcgi_passunix:/run/php/php7.0-fpm.sock;fastcgi_indexindex.php;fastcgi_paramSCRIPT_FILENAME$document_root$fastcgi_script_name;includefastcgi_params;}location /{proxy_pass http://127.0.0.1:8080;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "Upgrade";proxy_set_header X-Real-IP $remote_addr;}}server {listen 80 default_server;server_name weixin.techeek.cn;root /usr/share/nginx/html;index index.php index.html index.htm;location / {try_files $uri $uri/ =404;}}


推荐阅读


上一篇：小夫与胖虎6张图 小夫我要进来了是什么梗

下一篇：大窗帘在家怎么清洗 平时窗帘怎么清洗