微信小程序实现即时通信聊天功能 php swoole

忠忠

已于 2022-02-25 17:08:35 修改

阅读量7.4k

点赞数 3

文章标签：微信小程序 php swoole

于 2022-02-15 10:11:21 首次发布

本文链接：https://blog.csdn.net/qiannz/article/details/122936922

版权

本文介绍了如何通过微信小程序配合PHP Swoole搭建即时通信聊天功能。首先在宝塔面板中安装Swoole环境，然后自定义安装swoole。接着配置nginx反向代理，完成小程序端的合法域名设置。在小程序端，详细展示了chat.js、chat.wxml、chat.wxss、websocket.js、config.js和util.js等文件的代码实现。最后在服务端，使用PHP编写了chat.php来常驻运行。

摘要由CSDN通过智能技术生成

一、宝塔安装Swoole环境

二、自定义安装swoole环境

mkdir /src

cd /src

# 下载
wget https://pecl.php.net/get/swoole-4.4.4.tgz

# 解压

tar zxf swoole-4.4.4.tgz

# 编译安装扩展

# 进入目录

cd swoole-4.4.4 

# 执行phpize命令，产生出configure可执行文件

/usr/bin/phpize  

# 进行配置

./configure --with-php-config=/usr/bin/php-config   

# 编译和安装

make && make install 

vi /etc/php.ini

复制如下代码

extension=swoole.so

放到你所打开或新建的文件中即可，无需重启任何服务

# 查看扩展是否安装成功

php -m|grep swoole

三、宝塔配置nginx反向代理

upstream websocket{
 hash $remote_addr consistent;
 server 127.0.0.1:9501 weight=5 max_fails=3 fail_timeout=30s;
}

server {
 listen 80;
 server_name wss.51chow.com;
 rewrite ^(.*)$ https://$host$1 permanent;
}

server
{
    listen 443 ssl;
    server_name wss.51chow.com;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/swoole_1909a;
    
    ssl_certificate /www/server/keys/7248556_wss.51chow.com.pem;
    ssl_certificate_key /www/server/keys/7248556_wss.51chow.com.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;
   
   location / {
    	if (!-e $request_filename) {
    	#一级目录
    	rewrite ^(.*)$ /index.php?s=$1 last;
    	break;
    	}
    	#wss配置
    	client_max_body_size 100m;
    	proxy_redirect off;
    	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";
    	
    	proxy_pass http://websocket;#反向代理转发地址
    }
    #SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则
    #error_page 404/404.html;
    #SSL-END
    
    #ERROR-PAGE-START  错误页配置，可以注释、删除或修改
    #error_page 404 /404.html;
    #error_page 502 /502.html;
    #ERROR-PAGE-END
    
    #PHP-INFO-START  PHP引用配置，可以注释或修改
    include enable-php-00.conf;
    #PHP-INFO-END
    
    #REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
    include /www/server/panel/vhost/rewrite/wss.51chow.com.conf;
    #REWRITE-END
    
    #禁止访问的文件或目录
    location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)
    {
        return 404;
    }
    
    #一键申请SSL证书验证目录相关设置
    location ~ \.well-known{
        allow all;
    }
    
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    {
        expires      30d;
        error_log /dev/null;
        access_log /dev/null;
    }
    location ~ .*\.(js|css)?$
    {
        expires      12h;
        error_log /dev/null;
        access_log /dev/null;
    }
	access_log  /www/wwwlogs/wss.51chow.com.log;
    error_log  /www/wwwlogs/wss.51chow.com.error.log;
}

四、小程序端配置

登录mp.weixin.qq.com

开发=>开发管理=>开发设置，完成合法域名设置

五、小程序端代码

/pages/chat/chat.js

const app = getApp()
var websocket = require('../../utils/websocket.js');
var utils = require('../../utils/util.js');

import {HTTP_REQUEST_URL, HEADER, USER_ID, OPEN_ID} from "../../utils/config.js"

Page({
  /**
  * 页面的初始数据
  */
  data: {
    newslist: [],
    userInfo: {},
    scrollTop: 0,
    increase: false,//图片添加区域隐藏
    aniStyle: true,//动画效果
    message: "",
    previewImgList: []
  },
  /**
  * 生命周期函数--监听页面加载
  */
  onLoad: function () {
    var that = this
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo
      })
    }
    //调通接口
    websocket.connect(this.data.userInfo, function (res) {
      console.log(res)
      var list = []
      list = that.data.newslist
      let data = JSON.parse(res.data)
      if(data.type == 'open') {
        list = data.content
      } else {
        list.push(data)
      }
      that.setData({
        newslist: list
      })
      that.bottom()
    })
  },
  // 页面卸载
  onUnload() {
    wx.closeSocket();
    wx.showToast({
      title: '连接已断开~',
      icon: "none",
      duration: 2000
    })
  },
  //事件处理函数
  send: function () {
    var flag = this
    let uid = wx.getStorageSync(USER_ID)
    if (this.data.message.trim() == "") {
      wx.showToast({
        title: '消息不能为空哦~',
        icon: "none&#