微信小程序实现即时通信聊天功能的实例代码


项目背景:小程序中实现实时聊天功能

一、服务器域名配置

配置流程

配置参考URL:https://developers.weixin.qq.com/miniprogram/dev/api/api-network.html

二、nginx中配置反向代理加密websocket(wss)

?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 upstream websocket{  hash $remote_addr consistent;  server 127.0.0.1:9090 weight=5 max_fails=3 fail_timeout=30s; } server {  listen 80;  server_name www.xxxx.cn;  rewrite ^(.*)$ https://$host$1 permanent; } server  {  listen 443;   server_name www.xxxx.cn;   ssl on;   root /home/wwwroot/yzcp;   index index.php index.html index.htm;   ssl_certificate /usr/local/nginx/conf/cert/1526060965511.pem;#这里是服务端证书路径   ssl_certificate_key /usr/local/nginx/conf/cert/1526060965511.key;#这里是密钥路径   ssl_session_timeout 5m;   ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;   ssl_protocols TLSv1 TLSv1.1 TLSv1.2;   ssl_prefer_server_ciphers on;   ssl_verify_client off;  #隐藏index.php   location / {  #index index.php;  deny 127.0.0.1;    if (!-e $request_filename) {     #一级目录     rewrite ^(.*)$ /index.php?s=$1 last;     break;    }    #wss配置    client_max_body_size 100m;    proxy_redirect off;    proxy_pass http://websocket;#反向代理转发地址    proxy_set_header Host $host;# http请求的主机域名    proxy_set_header X-Real-IP $remote_addr;# 远程真实IP地址    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;#反向代理之后转发之前的IP地址    proxy_read_timeout 604800s;#websocket心跳时间,默认是60s    proxy_http_version 1.1;    proxy_set_header Upgrade $http_upgrade;    proxy_set_header Connection "Upgrade";   }   location ~ .+\.php {    fastcgi_pass unix:/tmp/php-cgi.sock;    fastcgi_index index.php;    include fastcgi_params;    set $path_info "";    set $real_script_name $fastcgi_script_name;     if ($fastcgi_script_name ~ "^(.+?\.php)(/.+)$") {     set $real_script_name $1;     set $path_info $2;    }    fastcgi_param SCRIPT_FILENAME $document_root$real_script_name;    fastcgi_param SCRIPT_NAME $real_script_name;    fastcgi_param PATH_INFO $path_info;   }      #防盗链开始   location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$  {  expires  30d;  }  location ~ .*\.(js|css)?$  {  expires  12h;  }  access_log /home/wwwlogs/www1537ucn.log;  }

三、安装swoole

编译安装:

?
1 2 3 4 5 6 7 8 9 10 wget http://pecl.php.net/get/swoole-1.9.3.tgz  //下载swoole tar -zvxf swoole-1.9.3.tgz  //解压swoole cd swoole-1.9.3/;  //进入swoole /usr/local/php54/bin/phpize;  //生成configure ./configure --with-php-config=/usr/local/php/bin/php-config make && make install   //安装 cd /phpstudy/server/php/lib/php/extensions/no-debug-non-zts-20121212 //查看是否安转上了swoole.so (注意:此文件下边都是你安装的拓展) vim /phpstudy/server/php/etc/php.ini  //在php.ini添加extension=swoole.so加入到文件最后一行 lnmp restart; //重启nginx php -m; //查看phpinfo,这时候swoole拓展已经装上了

四、服务器端运行程序

1、创建server.php放到项目的根目录即可

?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <?php //实例化一个swoole的websocket服务监听本机的9501端口 $server = new swoole_websocket_server("服务器IP", 9090); //只需要绑定要监听的ip和端口。如果ip指定为127.0.0.1,则表示客户端只能位于本机才能连接,其他计算机无法连接。 //端口这里指定为9090,可以通过netstat查看下该端口是否被占用。如果该端口被占用,可更改为其他端口,如9502,9503等。 $server->on('open', function (swoole_websocket_server $server, $request) {  echo "你好连接成功{$request->fd}\n"; }); $server->on('message', function (swoole_websocket_server $server, $frame) {  foreach($server->connections as $key => $fd) {   $user_message = $frame->data;   $server->push($fd, $user_message);  } }); $server->on('close', function ($ser, $fd) {  echo "client {$fd} closed\n"; }); $server->start(); ?>

2、由于swoole_server只能运行在CLI模式下,所以不要试图通过浏览器进行访问,这样是无效的,我们在命令行下面执行,注意一定要找到php的绝对路径php  server.php  (这行代码的意思是,把程序在服务器跑起来)

注意:php server.php命令运行后,下面的黑框关闭后将无法聊天。所以一般使用命令:nohup php server.php &

五、客户端

1、网页代码

?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55  "utf-8">  聊天    
"show">
 
"panel">   内容:   收信人:"text" id="touser">   "button" id="send-btn" value="发送">   "button" id="close-btn" value="关闭">