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 src="js/vue.js"></script>

<script src="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;

}

vue实现简单在线聊天的更多相关文章

  1. SpringBoot+Vue+WebSocket 实现在线聊天

    一.前言 本文将基于 SpringBoot + Vue + WebSocket 实现一个简单的在线聊天功能 页面如下: 在线体验地址:http://www.zhengqingya.com:8101 二 ...

  2. java Socket实现简单在线聊天（二）

    接<java Socket实现简单在线聊天(一)>,在单客户端连接的基础上,这里第二步需要实现多客户端的连接,也就需要使用到线程.每当有一个新的客户端连接上来,服务端便需要新启动一个线程进 ...

  3. 基于Server-Sent Event的简单在线聊天室

    Web即时通信 所谓Web即时通信,就是说我们可以通过一种机制在网页上立即通知用户一件事情的发生,是不需要用户刷新网页的.Web即时通信的用途有很多,比如实时聊天,即时推送等.如当我们在登陆浏览知乎时 ...

  4. java Socket实现简单在线聊天（三）

    在上一篇,利用线程使服务端实现了能够接收多客户端请求的功能,这里便需要客户端接收多客户端消息的同时还能把消息转发到每个连接的客户端,并且客户端要能在内容显示区域显示出来,从而实现简单的在线群聊. 在实 ...

  5. java Socket实现简单在线聊天（一）

    最近的项目有一个在线网页交流的需求,由于很久以前做过的demo已经忘记的差不多了,因此便重新学习一下. 我计划的大致实现步骤分这样几大步: 1.使用awt组件和socket实现简单的单客户端向服务端持 ...

  6. 基于Server-Sent Event的简单聊天室　Web 2.0时代，即时通信已经成为必不可少的网站功能，那实现Web即时通信的机制有哪些呢？在这门项目课中我们将一一介绍。最后我们将会实现一个基于Server-Sent Event和Flask简单的在线聊天室。

    基于Server-Sent Event的简单聊天室 Web 2.0时代,即时通信已经成为必不可少的网站功能,那实现Web即时通信的机制有哪些呢?在这门项目课中我们将一一介绍.最后我们将会实现一个基于S ...

  7. vue.js+socket.io+express+mongodb打造在线聊天

    vue.js+socket.io+express+mongodb打造在线聊天 在线地址观看 http://www.chenleiming.com github地址 https://github.com ...

  8. vue.js+socket.io+express+mongodb打造在线聊天[二]

    vue.js+socket.io+express+mongodb打造在线聊天[二] 在线地址观看 http://www.chenleiming.com github地址 https://github. ...

  9. 基于PHP实现一个简单的在线聊天功能（轮询ajax ）

    基于PHP实现一个简单的在线聊天功能(轮询ajax ) 一.总结 1.用的轮询ajax 二.基于PHP实现一个简单的在线聊天功能 一直很想试着做一做这个有意思的功能,感觉复杂的不是数据交互和表结构,麻 ...

随机推荐

  1. Ubuntu 16.04安装NVIDIA驱动后循环登录问题

    问题描述 最近买了两块NVIDIA Titan X Pascal显卡装到了服务器(运行Ubuntu 16.04)上.为了使用这两块GPU显卡,首先需要安装显卡驱动,安装方式为 #安装一个依赖文件,并更 ...

  2. Stars POJ - 2352

    Astronomers often examine star maps where stars are represented by points on a plane and each star h ...

  3. 查看Django版本

    python -m django --version dd

  4. bzoj 3580 冒泡排序 乱搞+思维

    冒泡排序 Time Limit: 15 Sec  Memory Limit: 256 MBSubmit: 243  Solved: 108[Submit][Status][Discuss] Descr ...

  5. HDU 2686 / NYOJ 61 DP

    传纸条(一) 时间限制:2000 ms  |  内存限制:65535 KB 难度:5   描述 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行 ...

  6. SNS应用好友动态Feed模块设计

    转载自:http://libo93122.blog.163.com/blog/static/122189382012112145728902/ 备注:找不到原作者了. 现在大部分SNS网站都有一个功能 ...

  7. 【c#】winform 上传图片

    1.拖拽上传图片 1.1.后台代码中修改窗体属性,添加 AllowDrop = true 1.2.给窗体添加拖拽事件,在事件列表找到拖拽 双击即可: 在 DragDrop 生成的方法中添加代码如下: ...

  8. LightOJ 1013 - Love Calculator LCS

    题意:找一个串使给出的两个串都是它的子串,要求最短,求出最短长度,以及种类数. 思路:可以想到,当两个子串a,b拥有最长的公共子串为LCS时,那么可以求出的最短的串为lena+lenb-LCS. 那么 ...

  9. LightOJ 1321 - Sending Packets 简单最短路+期望

    http://www.lightoj.com/volume_showproblem.php?problem=1321 题意:每条边都有概率无法经过,但可以重新尝试,现给出成功率,传输次数和传输时间,求 ...

  10. JMeter 保持sessionId

    因项目需要,这几天用到了jmeter进行性能测试,测试的是一个管理系统,需要用户先登录,然后才能做操作的,其中就遇到了关于session的问题. 我使用的是badboy(版本2.1)进行的脚本录制,然 ...