vue+node.js+socket.io+express 一对一聊天
node.js
npm install socket.io
第一：node.js服务器端
基于node.js和express
const express = require('express')
const app = express()
const query=require('./mysql/connect')
const port = 2000
const pddUrl = 'http://192.168.1.178'
var server = require('http').Server(app);
var io = require('socket.io')(server);
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({
extended:true
}));
//设置跨域访问
app.all("*",function(req,res,next){
//设置允许跨域的域名，*代表允许任意域名跨域
res.header("Access-Control-Allow-Origin","*");
//允许的header类型
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
//跨域允许的请求方式
res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
if (req.method.toLowerCase() == 'options')
res.send(200);//让options尝试请求快速结束
else
next();
})
app.get('/', function(req, res){
res.send('<h1>你好web秀</h1>');
});
/*开始*/
let arrAllSocket = [];
io.on('connection',function(socket) {
/***********加入聊天****************/
//obj模型
/*
obj={
? username: this.xvalue,
? userid:"fs",
? password: 'password'
}
*/
socket.on('join', function (obj) {
console.log(obj.userid+'join')
arrAllSocket[obj.userid] = socket
})
/***********************************/
/****** 接收某人发送的消息*********/
socket.on('sendmsg', function (data) {
console.log(data)
let target = arrAllSocket[data.userid]
let res = {
code: 200,
msg:data.username,
self:true,
}
if (target) {
//发送信息至指定的人
target.emit('receivemsg', res)
console.log(res)
}
});
/************监听用户退出***************/
socket.on('disconnecta', function(data){
let res = {
code: 200,
msg:`${data.userid}已退出聊天室`,
self:true,
}
io.emit('logout',res);
console.log(data.userid+'退出了聊天室');
});
});
server.listen(port,() => console.log(`Example app listening on port ${pddUrl}:${port}`))
第二步：a页面-----客户
1.安装依赖
npm install vue-socket.io --save
2.在main.js中引入
import VueSocketIO from 'vue-socket.io'
Vue.use(new VueSocketIO({
debug: true,
connection: 'xx',//这是路径比如： http://192.168.1.17 8
vuex: {},
}))
3.在页面
<template>
<div>
<div>
<p>聊天窗口</p>
<div id="chatContent">
</div>
</div>
<div>
<input v-model="xvalue" />
<button @click="Getvabk">发送</button>
<button @click="Getbackvabk">退出</button>
</div>
</div>
</template>
<script>
export default {
name: "Mypersonal-zxlx",
data(){
return{
fslista:[],
jsLista:[],
xvalue:'',
}
},
created() {
},
mounted() {
//发送信息给服务端
this.$socket.emit('join',{
username: this.xvalue,
userid:"fs",//这个是你的id
password: 'password'
});
},
sockets: {
connection() {
? //加入聊天
this.$socket.emit('join',{
username: this.xvalue,
userid:"fs",//这个是你要聊天对方的id
password: 'password'
});
},
receivemsg(data) {?//监听receivemsg事件，方法是后台定义和提供的
console.log(data);
this.cs(data);
},
logout(data) {?//监听logout事件，方法是后台定义和提供的
console.log(data);
this.cs(data);
},
},
methods:{
Getbackvabk(){
this.$socket.emit('disconnecta',{
username: this.xvalue,
userid:"fs",
password: 'password'
});
},
Getvabk(){
//发送信息给服务端
this.$socket.emit('sendmsg',{
username: this.xvalue,
userid:"js",
password: 'password'
});
},
cs(data){
let chatContent = document.getElementById('chatContent')
let newMsg = document.createElement('div')
let msgContent = document.createElement('span')
newMsg.append(msgContent)
msgContent.innerText = data.msg
newMsg.classList.add('self-msg')
chatContent.append(newMsg)
}
}
}
</script>
<style scoped>
</style>
第三步：b页面------客服端口
<template>
<div>
cs
<div>
<p>聊天窗口</p>
<div id="chatContent">
</div>
</div>
<div>
<input v-model="xvalue" />
<button @click="Getvabk">发送</button>
</div>
</div>
</template>
<script>
export default {
name: "cs",
data(){
return{
xvalue:""
}
},
created() {
},
mounted() {
this.$socket.emit('join',{
username: this.xvalue,
userid:"js",//对于客服来说这是客服的id
password: 'password'
});
},
sockets: {
connection() {
this.$socket.emit('join',{
username: this.xvalue,
userid:"js",
password: 'password'
});
},
receivemsg(data) {?//监听message事件，方法是后台定义和提供的
console.log(data);
this.cs(data);
},
logout(data) {?//监听message事件，方法是后台定义和提供的
console.log(data);
this.cs(data);
},
},
methods:{
Getvabk(){
//发送信息给服务端
this.$socket.emit('sendmsg',{
username: this.xvalue,
userid:"fs",////对于客服来说这是客户的id
password: 'password'
});
},
cs(data){
let chatContent = document.getElementById('chatContent')
let newMsg = document.createElement('div')
let msgContent = document.createElement('span')
newMsg.append(msgContent)
msgContent.innerText = data.msg
newMsg.classList.add('self-msg')
chatContent.append(newMsg)
}
}
}
</script>
<style scoped>
</style>
--------------------------end结束-------------------