项目背景：小程序中实现实时聊天功能
一、服务器域名配置
配置流程
配置参考URL：https://developers.weixin.qq.com/miniprogram/dev/api/api-network.html
二、nginx中配置反向代理加密websocket(wss)
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 ; rewrite ^(.*)$ https://$host$1 permanent; } server { listen 443; server_name ; 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 ;#反向代理转发地址 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
编译安装:
wget //下载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=https://www.jb51.net/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放到项目的根目录即可
<?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、网页代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>聊天</title> <style type="text/css"> #show{ width: 600px; height: 300px; overflow-y: scroll; } .my-message{ background-color: rgba(105, 105, 105, 0.64); color: #9e0505; width: 200px; float: right; padding: 10px; } .other-message{ background-color: rgba(105, 105, 105, 0.64); color: #9e0505; width: 200px; float: left; padding: 10px; } </style> </head> <body> <div></div> <div> 内容：<textarea></textarea> 收信人：<input type="text"> <input type="button" value="发送"> <input type="button" value="关闭"> </div> </body> <script src="https://www.jb51.net/__PUBLIC__/js/jquery-1.10.2.min.js" charset="utf-8"></script> <script type="text/javascript"> var socket = new WebSocket("wss://域名"); $("#close-btn").click(function () { socket.close(); }) $("#send-btn").click(function () { var touser = $("#touser").val(); var content = $("#content").val(); var htmlstr = "<div><p>我："+content+"</p></div>"; $("#show").append(htmlstr); socket.send(content+"@"+touser); }) socket.onmessage = function (p1) { var htmlstr = "<div><p>"+p1.data+"</p></div>"; $("#show").append(htmlstr); } </script> </html>
2、小程序端的代码
Uitls/websocket.js：