vue实现简单在线聊天
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实现简单在线聊天的更多相关文章
- SpringBoot+Vue+WebSocket 实现在线聊天
一.前言 本文将基于 SpringBoot + Vue + WebSocket 实现一个简单的在线聊天功能 页面如下: 在线体验地址:http://www.zhengqingya.com:8101 二 ...
- java Socket实现简单在线聊天（二）
接<java Socket实现简单在线聊天(一)>,在单客户端连接的基础上,这里第二步需要实现多客户端的连接,也就需要使用到线程.每当有一个新的客户端连接上来,服务端便需要新启动一个线程进 ...
- 基于Server-Sent Event的简单在线聊天室
Web即时通信 所谓Web即时通信,就是说我们可以通过一种机制在网页上立即通知用户一件事情的发生,是不需要用户刷新网页的.Web即时通信的用途有很多,比如实时聊天,即时推送等.如当我们在登陆浏览知乎时 ...
- java Socket实现简单在线聊天（三）
在上一篇,利用线程使服务端实现了能够接收多客户端请求的功能,这里便需要客户端接收多客户端消息的同时还能把消息转发到每个连接的客户端,并且客户端要能在内容显示区域显示出来,从而实现简单的在线群聊. 在实 ...
- java Socket实现简单在线聊天（一）
最近的项目有一个在线网页交流的需求,由于很久以前做过的demo已经忘记的差不多了,因此便重新学习一下. 我计划的大致实现步骤分这样几大步: 1.使用awt组件和socket实现简单的单客户端向服务端持 ...
- 基于Server-Sent Event的简单聊天室 Web 2.0时代，即时通信已经成为必不可少的网站功能，那实现Web即时通信的机制有哪些呢？在这门项目课中我们将一一介绍。最后我们将会实现一个基于Server-Sent Event和Flask简单的在线聊天室。
基于Server-Sent Event的简单聊天室 Web 2.0时代,即时通信已经成为必不可少的网站功能,那实现Web即时通信的机制有哪些呢?在这门项目课中我们将一一介绍.最后我们将会实现一个基于S ...
- vue.js+socket.io+express+mongodb打造在线聊天
vue.js+socket.io+express+mongodb打造在线聊天 在线地址观看 http://www.chenleiming.com github地址 https://github.com ...
- vue.js+socket.io+express+mongodb打造在线聊天[二]
vue.js+socket.io+express+mongodb打造在线聊天[二] 在线地址观看 http://www.chenleiming.com github地址 https://github. ...
- 基于PHP实现一个简单的在线聊天功能（轮询ajax ）
基于PHP实现一个简单的在线聊天功能(轮询ajax ) 一.总结 1.用的轮询ajax 二.基于PHP实现一个简单的在线聊天功能 一直很想试着做一做这个有意思的功能,感觉复杂的不是数据交互和表结构,麻 ...
随机推荐
- 阐述ArrayList、Vector、LinkedList的存储性能和特性？
ArrayList 和Vector他们底层的实现都是一样的,都是使用数组方式存储数据,此数组元素数大于实际存储的数据以便增加和插入元素,它们都允许直接按序号索引元素,但是插入元素要涉及数组元素移动等内 ...
- POJ1015 DP
Jury Compromise Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 28927 Accepted: 7676 ...
- ZooKeeper配额指南(十)
配额 ZK有命名空间和字节配额.你可以使用ZooKeeperMain类来设置配额.ZK打印警告信息如果用户超过分配给他们的配额.这些信息被打印到ZK的日志中. $java -cp zookeeper. ...
- \(\rm LightOJ 1371 - Energetic Pandas 简单计数+组合\)
http://www.lightoj.com/volume_showproblem.php?problem=1371 题意:给你n根竹子,和n只熊猫(XD),每个熊猫只能选择重量不大于它的竹子,问有几 ...
- 【hdu3033】分组背包（每组最少选一个）
[题意] 有S款运动鞋,一个n件,总钱数为m,求不超过总钱数且每款鞋子至少买一双的情况下,使价值最大.如果有一款买不到,就输出“Impossible". 1<=N<=100 1 ...
- 【HDU】6012 Lotus and Horticulture （BC#91 T2）
[算法]离散化 [题解] 答案一定存在于区间的左右端点.与区间左右端点距离0.5的点上 于是把所有坐标扩大一倍,排序(即离散化). 让某个点的前缀和表示该点的答案. 初始sum=∑c[i] 在l[i] ...
- quick-cocos2dx 悬浮节点(NotificationNode)
cocos2dx 开发游戏时,有时某些节点不需要随着场景的切换而销毁.但cocos2dx的机制只允许同时只有一个运行的场景,如果你的所有节点都是依附于这个场景的,那场景的切换必然带来节点的销毁. 比如 ...
- 超详细的Java面试题总结（一）之Java基础知识篇
面向对象和面向过程的区别 面向过程: 优点:性能比面向对象高,因为类调用时需要实例化,开销比较大,比较消耗资源;比如单片机.嵌入式开发.Linux/Unix等一般采用面向过程开发,性能是最重要的因 ...
- OpenCVSSDpython目标探测对象检测
1.请参考大牛博客链接 https://www.aiuai.cn/aifarm822.html
- Webview 中FaultyInfo代码说明
class FaultyInfoHandler(tornado.web.RequestHandler): def get(self): import xmlrpc.client s = xmlrpc. ...