wildfirechat野火IM搭建过程和demo试用

首先,当今微信当道,国内即时聊天工具没有第二家。不过当你进到一个群,群主会不停的告诉你,不要讨论一些不改讨论的事情,你就会发现,其实你说什么,群外之上还有人在看着你。
假设你跟爱人之间共享一些家里的密码之类的数据,是不是可能被一些人看到呢?天晓得!所以为了不自己整一个呢。平时两个人说啥也不至于发出去还要考虑一下别人会怎么看。所以就有了这个试水了。
野火IM是一套开源通用的即时通讯组件,本身就是一个比较成熟的产品。有PC,安卓,iOS,Web端,已经有了demo,部署起来直接能用。
项目搭建起来比较难的就是音视频中转服务器TURN服务。
说下自己搭建过程中遇到的坑。
第一次是在亚马逊的新加坡地区买了服务器,过程还比较顺利,稍微Google一些资料就搭建起来了。
安卓客户端按照说明改了配置,打包安装就能用。
不过后来发现,新加坡的服务器延迟比较严重,经常会有一些消息发不出。响应比较慢的情况。没办法只能想办法移回了阿里云深圳地区。
这其中就遇到了TURN服务搭建的一些坑,关键额就是3478的端口不仅要开TCP的,UDP的端口也要开,在这个问题上折腾了很久。这个图是我设置的策略组:

其他的服务,我是直接打包了aws上的文件过来,server和app_server这些这些配置都是不需要改的,启动即可。

下面是我打包好的iOS和安卓,有需要的可以试用:

iOS: 在iPhone打开safari浏览器,地址栏输入:

itms-services:///?action=download-manifest&url=https://www.lanjinming.com/wp-content/uploads/im.plist

安卓:https://www.lanjinming.com/wp-content/uploads/2021/01/chat-debug.apk

短信接口没有搭,试用了试用了超级验证码,需要的留言

wordpress插件集成vue

vue.js的简单让它可以很方便的集成到各应用中,相比react它更轻便灵活,所以react做大型应用是合适的。不过作为wordpress一个插件,react太重了。

其实,在wp的插件中集成vue是很简单的事情,可以看下面的代码示意,比较重要的是要先include页面进来,然后再引入vue.js,以及vue的初始化以及逻辑代码了

  1. 下面这个是插件主文件,我这里是dfass.php
function df_options_page_html() {
    // check user capabilities
    if (!current_user_can('manage_options')) {
        return;
    }
    //加载页面
    include(plugin_dir_path(__FILE__) . 'view.php');
    //加载css
    wp_enqueue_style('element-css', plugin_dir_url(__FILE__) . 'element.css', [], '2.14.1');
    wp_enqueue_style('index.css', plugin_dir_url(__FILE__) . 'index.css', array(), '1.0');
    //加载js
    wp_enqueue_script('vue', plugin_dir_url(__FILE__) . 'vue.js', [], '2.6.12');
    wp_enqueue_script('element-js', plugin_dir_url(__FILE__) . 'element.js', [], '2.14.1');
    wp_enqueue_script('axios', plugin_dir_url(__FILE__) . 'axios.min.js', [], '0.21.1');
    wp_enqueue_script('index.js', plugin_dir_url(__FILE__) . 'index.js', array(), '1.0');
    init_user();
}

add_action('admin_menu', 'df_options_page');
function df_options_page() {
    add_dashboard_page('钉钉表单助手', '钉钉表单助手', 'manage_options', 'df', 'df_options_page_html');
}

2. 接下来是view页面html文件view.php

<div id="app" class="wrapper">
    <div class="centered">
        <h2>钉钉表单助手</h2>
    </div>
    <template>
        <el-row>
            <el-input
                    v-model="value"
                    style="width: 300px"
                    placeholder="请输入手机号">
            </el-input>
            <el-button type="primary" v-on:click="btnClick()">添加</el-button>
            <el-button type="primary" v-on:click="btnApply()">执行</el-button>
        </el-row>
        <el-row>
            <el-table
                    :data="tableData"
                    stripe

                    style="width: 100%">
                <el-table-column
                        prop="name"
                        label="用户名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="user_id"
                        label="钉钉id"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="created_at"
                        label="添加时间">
                </el-table-column>
                <el-table-column
                        prop="last_time"
                        label="最后执行时间">
                </el-table-column>
                <el-table-column
                        prop="last_result"
                        label="最后执行结果">
                </el-table-column>
                <el-table-column
                        prop="enable"
                        label="状态">
                    <template slot-scope="scope">
                        <div slot="reference" class="name-wrapper">
                            <el-tag v-show="scope.row.enable===true" type="success" size="medium">启用</el-tag>
                            <el-tag v-show="scope.row.enable===false" type="info" size="medium">禁用</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button v-show="scope.row.enable === false" @click="handleClick(scope.row,true)" type="primary"
                                   size="small">启用
                        </el-button>
                        <el-button v-show="scope.row.enable === true" @click="handleClick(scope.row,false)" type="danger"
                                   size="small">禁用
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
    </template>

</div>

3. 最后是vue初始化及逻辑代码index.js

(function () {
    let vue = new Vue({
        el: '#app',
        data: function () {
            return {
                activeIndex: '1',
                activeSubIndex: '1',
                tableData: &#91;],
                loading: false,
                value: undefined,
                options: &#91;],
            }
        },
        mounted: function () {
            this.getTableData()
        },
        methods: {
            getTableData() {
                let data = new FormData();
                data.append('action', 'df_get_setting_list');
                axios.post(ajaxurl, data).then(function (res) {
                    if (res.data.code !== 200) {
                        vue.$message({
                            message: res.data.message,
                            type: 'error'
                        });
                        return;
                    }
                    vue.tableData = res.data.data.userList;
                })
            },
            handleClick(row, enable) {
                let data = new FormData();
                data.append('action', 'df_update_form_enable');
                data.append('user_id', row.user_id);
                data.append('enable', enable);
                axios.post(ajaxurl, data).then(function (res) {
                    if (res.data.code !== 200) {
                        vue.$message({
                            message: res.data.message,
                            type: 'error'
                        });
                    }
                    vue.getTableData();
                })
            },
            btnApply() {
                let data = new FormData();
                data.append('action', 'df_apply_form');
                axios.post(ajaxurl, data).then(function (res) {
                    if (res.data.code !== 200) {
                        vue.$message({
                            message: res.data.message,
                            type: 'error'
                        });
                    }
                    vue.getTableData();
                })
            },
            btnClick() {
                let data = new FormData();
                data.append('action', 'df_add_user_form');
                data.append('phone', this.value);
                this.value = undefined;
                axios.post(ajaxurl, data).then(function (res) {
                    if (res.data.code !== 200) {
                        vue.$message({
                            message: res.data.message,
                            type: 'error'
                        });
                    }
                    vue.getTableData();
                    vue.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                })
            }
        }
    })
})();

如上,其实就可以在wp插件中集成vue了,完整的逻辑代码省略。

这个插件其实实现的是,每天9点根据钉钉打卡记录检测如果有加班讲自动发起加班餐表单申请。

可能有的人觉得奇葩,加班餐都还要申请!确实,博主所在公司也是个几百人的“大公司”,所以规章很多。但加班了还要手动填单,说句实话虽然我不是多懒的人,但我觉得不符合我们做“懒人”宗旨。

具体实现的不开源了,需要了解详细的可以留言交流。

常用命令

linux kill 特定名称

ps -ef | grep java | grep -v grep | cut -c 9-15 | xargs kill -9

sourcetree避免输入密码方法

git config --global credential.helper store

linux磁盘扩容

e2fsck -f /dev/vdb1  resize2fs /dev/vdb1

druid数据库密码配置文件加密

java -cp .\\druid-1.0.31.jar com.alibaba.druid.filter.config.ConfigTools ******

mac下csv乱码解决办法

到csv目录下, 用终端执行以下命令:

iconv -f UTF8 -t GB18030 a.csv >b.csv

MySQL修改密码

ALTER USER 'root'@'localhost' IDENTIFIED BY '******';

CREATE USER 'nextcloud'@'localhost' IDENTIFIED BY '******';

CREATE DATABASE IF NOT EXISTS nextcloud CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

GRANT ALL PRIVILEGES ON nextcloud.* TO 'nextcloud'@'localhost';
FLUSH PRIVILEGES;
粤ICP备2020138247号-1