huahuibao/app-mall/views/chat/index.php

<butto onclick="openMsg()">打开聊天</butto>
<butto onclick="send()">发消息</butto>
<butto onclick="closeMsg()">关闭</butto>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    var clientId;
    var ws;
    function openMsg() {
        ws = new WebSocket("ws://<?= Yii::$app->params['host'] ?>:8282");
        //服务端主动推送消息时会触发这里
        ws.onmessage = function (e) {
            var data = eval("(" + e.data + ")");
            var type = data.type || '';
            switch (type) {
                case 'init':
                    clientId = data.client_id;
                    $.post('<?= Yii::$app->params['c'] ?>/chat/bind-user', {clientId: clientId}, function (data) {

                    }, 'json');
                default :
                    console.log(e.data);
            }
        };
    }

    function closeMsg()
    {
        console.log(clientId);
        $.post('<?= Yii::$app->params['c'] ?>/chat/close', {clientId: clientId}, function (data) {

        }, 'json');
    }

    function send() {

        var arr = ['text', 'img', 'link', 'goods'];
        var index = Math.floor((Math.random() * arr.length));
        var type = arr[index];

        //var type = 'text';
        var data = {type: type}
        switch (type) {
            case 'text':
                //发文字
                data.content = '您好，有什么可以为你服务？';
                break;
            case 'img':
                //发图片
                data.shortUrl = '/uploads/201905/25/jpg/19052591518_12358.jpg';
                break;
            case 'link':
                data.linkId = 1;
                //发链接
                break;
            case 'goods':
                data.goodsId = 160;
                //发商品
                break;
            default:
        }
        $.post('<?= Yii::$app->params['c'] ?>/chat/send', data, function (data) {
        }, 'json');
    }

</script>