先上成品圖片
chat.PNG
技術(shù)應(yīng)用以及功能介紹
1.前端框架時(shí)用vue2搭建氧猬，基于elementUI
2.vue-socket.io長(zhǎng)連接的使用
3.用戶登陸退出的實(shí)時(shí)顯示
4.聊天數(shù)據(jù)的保存
3.后端使用express + mongoose來對(duì)數(shù)據(jù)進(jìn)行操作，主要包括增刪改查等
上面技術(shù)的使用之前的文章有寫，包括vue+express的使用以及mongoose數(shù)據(jù)庫的連接http://www.reibang.com/p/f50aa818ab66：vue+express的使用
http://www.reibang.com/p/440bb0c9d7f8 ：mongoose數(shù)據(jù)庫的連接
下面介紹vue-socket.io長(zhǎng)連接的使用
1.安裝
cnpm i vue-socket.io --save
//這里安裝使用可能會(huì)報(bào)錯(cuò)，如果報(bào)錯(cuò)使用vue-socket.io的`^2.1.1-a`版本安裝
2.在main.js引入
import VueSocketio from 'vue-socket.io';
Vue.use(VueSocketio,'http://localhost:3000/');
//后面的連接為后端地址，這里express啟動(dòng)的地址端口默認(rèn)時(shí)3000
3.在server/bin/www也就是express目錄文件夾下加入以下代碼:
var io = require('socket.io').listen(server.listen(port));
4.定義用戶表結(jié)構(gòu):models文件夾下定義chat.js
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var chatObj = new Schema({
groupPepole: String,
groupTime: String
});
module.exports = mongoose.model('chats',chatObj);
// chatName: String,
// chatTime: String
5.定義內(nèi)容表結(jié)構(gòu)在:models文件夾下定義chatcontent.js
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var chatconObj = new Schema({
chatName: String,
chatTime: String,
chatContent: String
});
module.exports = mongoose.model('chatcontents',chatconObj);
6.基于experss的增刪改查如下:在routers下定義chat.js,并在app.js下引入
var chatRouter = require('./routes/chat');
app.use('/chat', chatRouter);
chat.js代碼如下：
var express = require('express');
var Router = express.Router();
var chatModel = require('../models/chat');
var chatConModel = require('../models/chatcontent');
// 保存登陸用戶
Router.post('/pepole',function(req,res,next){
let newDate = new Date();
let pepoleList = new chatModel({
groupPepole: req.body.loginName,
groupTime: newDate.toLocaleDateString() + ' ' + newDate.toLocaleTimeString()
});
pepoleList.save(function(err,doc){
if(err) {
res.json({
states: 0,
msg: err.message
});
}else {
res.json({
states: 1,
msg: '保存成功'
});
}
});
// 保存用戶發(fā)布內(nèi)容
Router.post('/content',function(req,res,next){
let newDate = new Date();
let conList = new chatConModel({
chatName: req.body.chatName,
chatContent: req.body.chatContent,
chatTime: newDate.toLocaleDateString() + ' ' + newDate.toLocaleTimeString()
});
conList.save(function(err,doc){
if(err) {
res.json({
states: 0,
msg: err.message
});
}else {
res.json({
states: 1,
msg: '保存成功'
});
}
});
});
//獲取內(nèi)容并返回
Router.post('/geContentList',function(req,res,next){
chatConModel.find({}, function(err,doc){
if(err) {
res.json({
states: 0,
msg: err.message
});
}else {
res.json({
states: 1,
msg: doc,
count:doc.length
});
}
});
});
//獲取用戶列表
Router.post('/getUserList',function(req,res,next){
chatModel.find({}, function(err,doc){
if(err) {
res.json({
states: 0,
msg: err.message
});
}else {
res.json({
states: 1,
msg: doc,
count:doc.length
});
}
});
});
//退出登陸
Router.post('/out',function(req,res,next){
let conditions = {
groupPepole: req.body.loginName
}
chatModel.remove(conditions, function (err,doc) {
if(err) {
res.json({
states: 0,
msg: err.message
});
}else {
res.json({
states: 1,
msg: 'doc'
});
}
});
});
module.exports = Router;
下面時(shí)長(zhǎng)連接的使用
1.在server/bin/www下加入以下代碼：
io.sockets.on('connection', (socket) => {
console.log('鏈接成功了呀');
//監(jiān)聽新用戶加入
socket.on('login', function(obj){
//向所有客戶端廣播用戶加入
io.emit('login', obj);
// console.log(obj.username+'加入了聊天室');
});
socket.on('out', function(obj){
//向所有客戶端廣播用戶加入
io.emit('out', obj);
// console.log(obj.username+'加入了聊天室');
});
socket.on('content', function(obj){
//向所有客戶端廣播用戶加入
io.emit('content', obj);
// console.log(obj.username+'加入了聊天室');
});
});
在前端使用如下：
// 長(zhǎng)連接
sockets: {
//不能改,j建立連接自動(dòng)調(diào)用connect
connect: function() {
//與socket.io連接后回調(diào)
console.log("socket connected");
},
//服務(wù)端向客戶端發(fā)送login事件
login: function(value) {
//監(jiān)聽login(后端向前端emit login的回調(diào))
this.userList.push(value);
console.log(value, 'valuevaluevaluevaluevaluevalue')
},
out: function(value) {
//監(jiān)聽out(后端向前端emit out的回調(diào))
this.userList.push(value);
console.log(value, 'valuevaluevaluevaluevaluevalue')
},
content: function(value) {
//監(jiān)聽out(后端向前端emit out的回調(diào))
this.contentList.push(value);
console.log(value, 'valuevaluevaluevaluevaluevalue')
}
},
前端具體頁面如下
<template>
<div>
<div id="chat" style="position: relative;">
<div style="position:fixed;right:100px;top:20px">
<p>當(dāng)前用戶：{{itemName}}</p>
<el-button type="danger" style="margin-top:20px" @click="chatLoginOut">退出</el-button>
</div>
<div style="position:fixed;top:20px;left:20px">
<el-input v-model="inputUser" placeholder="請(qǐng)輸入用戶名"></el-input>
<el-button type="primary" style="margin-top:20px" @click="chatLogin">登陸</el-button>
<p style="margin-top:10px;font-size:14px">在線人數(shù)：<span style="color:red">{{userListNew.length}}</span>人</p>
<p style="margin-top:10px;font-size:14px" v-for="(item,i) in userList" :key="i">
<span style="color:red">{{item.groupPepole}}</span>
<span v-if="item.type==='in'">上線了</span>
<span v-if="item.type==='out'">下線了</span>
<span style="padding-left:10px;color:blue;font-size:12px">{{item.groupTime}}</span>
</p>
<p></p>
</div>
<div class="sidebar">
<div class="m-card">
<header>
<img class="avatar" width="40" height="40" alt="Coffce" src="/static/img/1.jpg">
<p class="name">群名稱</p>
</header>
<footer>
<input class="search" placeholder="search user...">
</footer>
</div>
<!--v-component-->
<div class="m-list">
<ul>
<!--v-for-start-->
<!-- <li>
<img class="avatar" width="30" height="30" alt="示例介紹" src="/static/img/2.png">
<p class="name">示例介紹</p>
</li> -->
<li @click="changeName(item.groupPepole)" :class="itemName===item.groupPepole ? 'active' : ''" v-for="(item,i) in userListNew" :key="i">
{{item.groupPepole}}
<!-- <img class="avatar" width="30" height="30" alt="webpack" src="/static/img/3.jpg"> -->
<!-- <p class="name">{{item.groupPepole}}</p> -->
</li>
<!--v-for-end-->
</ul>
</div>
<!--v-component-->
</div>
<div class="main">
<div class="m-message">
<ul>
<!--v-for-start--><!--v-for-end-->
<li style="height:40px" v-for="(item,i) in contentList" :key="i">
<span v-if="item.chatName!==itemName" class="contentLeft">{{item.chatName}} : {{item.chatContent}}</span>
<span v-if="item.chatName===itemName" class="contentRight">{{item.chatContent}} : {{item.chatName}}</span>
</li>
<!-- <li style="text-alain:right">121212：23232</li>
<li>121212：232323</li> -->
</ul>
</div>
<!--v-component-->
<div class="m-text">
<textarea v-model="texts" placeholder="點(diǎn)擊按鈕發(fā)送"></textarea>
<el-button type="primary" style="margin-top:20px;position: absolute;bottom: 0px;right: 0;" @click="send">發(fā)送</el-button>
</div>
<!--v-component-->
</div>
</div>
</div>
</template>
<style scoped>
.contentRight{
display: inline-block;
padding: 8px;
width: auto;
background: white;
position: absolute;
right: 20px;
}
.contentLeft{
display: inline-block;
padding: 8px;
width: auto;
background: white;
}
#chat {
overflow: hidden;
border-radius: 3px;
}
#chat {
margin: 20px auto;
width: 800px;
height: 600px;
}
#chat .sidebar {
float: left;
width: 200px;
color: #f4f4f4;
background-color: #2e3238;
}
.m-card {
padding: 9pt;
border-bottom: 1px solid #24272c;
}
.m-card .avatar {
border-radius: 2px;
}
.m-card .avatar, .m-card .name {
vertical-align: middle;
}
.m-card .name {
display: inline-block;
margin: 0 0 0 15px;
font-size: 1pc;
}
.m-card footer {
margin-top: 10px;
}
.m-card .search {
padding: 0 10px;
width: 100%;
font-size: 9pt;
color: #fff;
height: 30px;
line-height: 30px;
border: 1px solid #3a3a3a;
border-radius: 4px;
outline: 0;
background-color: #26292e;
}
.m-list li {
padding: 9pt 15px;
border-bottom: 1px solid #292c33;
cursor: pointer;
-webkit-transition: background-color .1s;
transition: background-color .1s;
position: relative;
}
.m-list .avatar {
border-radius: 2px;
}
.m-list .name {
display: inline-block;
margin: 0 0 0 15px;
position: absolute;
top: 19px;
}
.m-list li.active {
background-color: hsla(0,0%,100%,.1);
}
#chat .main {
position: relative;
overflow: hidden;
background-color: #eee;
}
#chat .m-message {
height: calc(100% - 10pc);
}
.m-message {
padding: 10px 15px;
overflow-y: scroll;
}
#chat .main, #chat .sidebar {
height: 100%;
}
#chat .m-text {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
}
.m-text {
height: 10pc;
border-top: 1px solid #ddd;
}
.m-text textarea {
padding: 10px;
height: 100%;
width: 100%;
border: none;
outline: 0;
font-family: Micrsofot Yahei;
resize: none;
}
</style>
<script>
export default{
components: {
},
data(){
return{
inputUser: '',
userLoginIn: '',
userList: [],
userListNew: [],
counts: '',
itemName: '',
texts: '',
contentList: []
}
},
// 長(zhǎng)連接
sockets: {
//不能改,j建立連接自動(dòng)調(diào)用connect
connect: function() {
//與socket.io連接后回調(diào)
console.log("socket connected");
},
//服務(wù)端向客戶端發(fā)送login事件
login: function(value) {
//監(jiān)聽login(后端向前端emit login的回調(diào))
this.userList.push(value);
console.log(value, 'valuevaluevaluevaluevaluevalue')
},
out: function(value) {
//監(jiān)聽out(后端向前端emit out的回調(diào))
this.userList.push(value);
console.log(value, 'valuevaluevaluevaluevaluevalue')
},
content: function(value) {
//監(jiān)聽out(后端向前端emit out的回調(diào))
this.contentList.push(value);
console.log(value, 'valuevaluevaluevaluevaluevalue')
}
},
mounted(){
this.getUser();
this.getCon();
// this.$socket.emit('login', {username:'admin'});
},
methods: {
chatLogin() {
let newDate = new Date();
// 像后端發(fā)數(shù)據(jù)
this.$socket.emit('login', {groupPepole:this.inputUser, type: 'in'});
this.loginIn('in');
this.getUser();
},
chatLoginOut() {
let newDate = new Date();
this.$socket.emit('out', {groupPepole:this.itemName, type: 'out'});
this.loginOut();
this.getUser();
},
changeName(name) {
this.itemName = name;
},
loginIn() {
//發(fā)送請(qǐng)求，這里我封裝了axios,報(bào)錯(cuò)的話可以用原生的axios請(qǐng)求
let paramRegist = {
type: 'post',
path: '/chat/pepole',
datas: {
loginName: this.inputUser
}
}
this.$store.dispatch(paramRegist).then(res=>{
this.$message({
message: res.data.msg,
type: 'success'
});
});
},
loginOut() {
let paramRegist = {
type: 'post',
path: '/chat/out',
datas: {
loginName: this.itemName
}
}
this.$store.dispatch(paramRegist).then(res=>{
// this.$message({
// message: res.data.msg,
// type: 'success'
// });
});
},
send() {
this.$socket.emit('content', {chatName:this.itemName, chatContent: this.texts});
let paramRegist = {
type: 'post',
path: '/chat/content',
datas: {
chatName: this.itemName,
chatContent: this.texts
}
}
this.$store.dispatch(paramRegist).then(res=>{
// this.contentList = res.data.msg;
});
},
getUser() {
let paramRegist = {
type: 'post',
path: '/chat/getUserList',
datas: {
}
}
this.$store.dispatch(paramRegist).then(res=>{
this.userListNew = res.data.msg;
this.itemName = this.userListNew[0].groupPepole
});
},
getCon() {
let paramRegist = {
type: 'post',
path: '/chat/geContentList',
datas: {
}
}
this.$store.dispatch(paramRegist).then(res=>{
this.contentList = res.data.msg;
});
}
}
}
</script>
這個(gè)就時(shí)實(shí)現(xiàn)簡(jiǎn)單的聊天工具，git地址如下https://github.com/a1218331130/vueBlog
