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结束-------------------
发现一款强大的开源聊天框架 Spika 。 它不仅提供iOS,Android,Web端的源码，还有后端的源码，都是开源的。Spika的提供者是来自克罗地亚的一家移动APP公司 Clover Studio 感谢他们的团队把这个项目从头到脚都开源了。
相对于传统的LAMP(LINUX, APACHE, MYSQL,PHP), Node.js + MongoDB 是一种比较新的后端组合。Google自己的聊天平台Google Messaging Cloud(GMC)就是基于Node.JS+MongoDB实现的。
废话不多说，开始使用吧！
安装服务器端
1.环境配置。 官网 上提供的是Ubuntu14.04版的配置过程。见下图：
由于我用的服务器是Amazon Linux,用yum来安装。
git clone git://github.com/nodejs/node.git
cd node
git checkout v4.4.7
./configure
make
sudo make install
sudo su
vi /etc/sudoers
:/usr/local/bin```
3.安装imagemagick
5.安装Spika
6.安装gulp
sudo npm install gulp -g
7.编写配置文件
把Config.host和port的值设为自己服务器的hostname和port, 把Config.chatDatabaseUrl的值改为mongoDB的路径。最好用1024以上的port。mongoDB如果没有修改安全选项的话，最好用127.0.0.1。
8 . 运行项目
这时候可能会报错
找不到jsdoc。 解决方法:
然后再次运行
开启服务器
node src/server/main.js
这个时候用浏览器登陆
主机号:端口号/spika
就可以开始聊天啦！
除了web版，它还有android和ios版，下次再尝试吧:)
