首页手记 vue+fetch实现简单在线聊天

vue+fetch实现简单在线聊天

标签：

JavaScript Vue.js

vue实现简单在线聊天

引用mui的ui库，ES6的 fetch做网络请求

//html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>vue-chat</title>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="css/app.css"/>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">chat (聊天窗口)</h1>
</header>
<div class="mui-content">
    <div id='fh-chat'>
        <chat-view ></chat-view>
    </div>
</div>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/vue.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/fh-chat.js"></script>
</body>
</html>
// js
const ChatView = Vue.component('chat-view', {
    render: function (h) {
        var that = this;
        return h('div', [
            h('ul', {'class': 'msg-list'},
                Array.apply(null, that.fhchatdata).map(function (item) {
                    return h('li', {'class': ['msg-item', item.type === 'send' ? 'msg-item-self' : '']},
                        [
                            h('i', {'class': ['mui-icon', item.type === 'send' ? 'msg-user mui-icon-person' : 'msg-user mui-icon-chat']}),
                            h('div', {'class': 'msg-content'}, [
                                item.value, h('span', {'class': 'msg-content-arrow'})
                            ])
                        ]
                    )
                })
            ),
            h('footer', {'class': 'chat-footer'}, [
                h('input', {
                    'class': 'input-text',
                    domProps: {
                        value: that.newSend
                    },
                    on: {
                        input: function (e) {
                            that.newSend = e.target.value
                        },
                        change: this.toggleIcon
                    }
                }),
                h('span', {
                    'class': ['mui-icon', this.vsend ? 'mui-icon-compose' : 'mui-icon-paperplane'],
                    on: {
                        click: this.send
                    },
                }),
            ])
        ])
    },
    data(){
        return {
            vsend: true,
            newSend: '',
            fhchatdata: []
        }
    },
    methods: {
        toggleIcon(){
            this.vsend = !this.vsend
        },
        send(){
            if (this.newSend) {
                this.fhchatdata.push({type: 'send', value: this.newSend});
                // this.fh_fetch('xurl', 'POST', {type: 'send', value: this.newSend})
            }
            this.newSend = '';
        },
        fh_fetch (url = '', type = 'GET', data = {}){
            // url = baseUrl + url;
            let requestObj = {
                credentials: 'include',
                method: type,
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                mode: "no-cors",
            };
            if (type == 'GET') {
                let dataStr = '';
                Object.keys(data).forEach(key => {
                    dataStr += key + '=' + data[key] + '&';
                });
                if (dataStr !== '') {
                    dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
                    url = url + '?' + dataStr;
                }
            } else if (type == 'POST') {
                Object.defineProperty(requestObj, 'body', {
                    value: JSON.stringify(data)
                })
            } else {
                console.log('error')
            }
            fetch(url, requestObj)
                .then(res => {
                    if (res.status == 200) {
                        return res.json()
                    } else {
                        console.log('error:' + res.status)
                    }
                })
                .then(json=> {
                    this.fhchatdata = json
                })
                .catch(err=>console.log('error:' + err))
        }
    },
    mounted(){
        this.fh_fetch('js/chatData.json')
    }
});

new Vue({
    el: '#fh-chat',
});
//css
/*online chat*/
.chat-footer {
    position: fixed;
    bottom: .1rem;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    width: 100%;
    height: 3rem;
    padding: .1rem 0;
    margin: 0 1px;
    font-size: 1.6rem;
    line-height: 1;
    border-top: solid 1px #bbb;
    background-color: #fafafa;
}

.chat-footer > .input-text {
    -webkit-flex: auto;
    flex: auto;
    background: #fff;
    border: solid 1px #ddd;
}

.chat-footer > span{
    color: blue;
    padding: 2px;
}

#fh-chat .msg-list {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 4.5rem !important;
}

.msg-item {
    padding: 8px;
    clear: both;
}

.msg-item .msg-user {
    width: 38px;
    height: 38px;
    border: solid 1px #d3d3d3;
    display: inline-block;
    background: #fff;
    border-radius: 3px;
    vertical-align: top;
    text-align: center;
    float: left;
    padding: 3px;
    color: #ddd;
}

.msg-item .msg-content {
    display: inline-block;
    border-radius: 5px;
    border: solid 1px #d3d3d3;
    background-color: #FFFFFF;
    color: #333;
    padding: 8px;
    vertical-align: top;
    font-size: 15px;
    position: relative;
    margin: 0 8px;
    max-width: 75%;
    min-width: 35px;
    float: left;
}

.msg-item .msg-content .msg-content-inner {
    overflow-x: hidden;
}

.msg-item .msg-content .msg-content-arrow {
    position: absolute;
    border: solid 1px #d3d3d3;
    border-right: none;
    border-top: none;
    background-color: #FFFFFF;
    width: 10px;
    height: 10px;
    left: -5px;
    top: 12px;
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

.msg-item-self .msg-user,
.msg-item-self .msg-content {
    float: right;
}

.msg-item-self .msg-content .msg-content-arrow {
    left: auto;
    right: -5px;
    -webkit-transform: rotateZ(225deg);
    transform: rotateZ(225deg);
}

.msg-item-self .msg-content,
.msg-item-self .msg-content .msg-content-arrow {
    background-color: #4CD964;
    color: #fff;
    border-color: #2AC845;
}

点击查看更多内容