1.安装vue-cli
2.init 初始化项目
3.npm install ws(websocket)
4.文件夹中创建server.js
var userNum = 0 // 统计人数
var chatList = []// 记录聊天内容
var WebSocketServer = require('ws').Server// 引入 ws
// 端口对应
var wss = new WebSocketServer({ port: 8080 })
// 调用broadcast广播,实现数据互通和实时更新
wss.broadcast = function (msg) {
wss.clients.forEach(function (item) {
item.send(msg)
})
}
// 监听连接
wss.on('connection', function (ws) {
userNum++
wss.broadcast(JSON.stringify({ funName: 'userCount', users: userNum, chat: chatList })) // 建立连接成功广播一次当前在线人数
console.log('连接人数:', userNum)
// 接受前端发来消息
ws.on('message', function (e) {
var resData = JSON.parse(e) // 消息处理 字符串转为对象
console.log('接收到来自clent的消息:' + resData.msg)
// 每次发送信息,都会把信息存起来,然后通过广播传递出去,这样此每次进来的用户就能看到之前的数据
chatList.push({ userId: resData.userId, content: resData.msg })
// 每次发送都相当于广播一次消息
wss.broadcast(JSON.stringify({ userId: resData.userId, msg: resData.msg }))
})
ws.on('close', function (e) {
userNum--
// 建立连接关闭广播一次当前在线人数
wss.broadcast(JSON.stringify({ funName: 'userCount', users: userNum, chat: chatList }))
console.log('Connected clients:', userNum)
console.log('长连接已关闭')
})
})
console.log('服务器创建成功')
<template>
<div class="chat-box">
<div class="header">聊天室人数:{{count}}</div>
<scroll class="message" ref="scorll" :data="list">
<div>
<div class="msg-box" ref="msgbox" v-for="(item,index) in list" :key="index">
<span>{{item.content}}</span>
<div class="header-avtor"></div>
</div>
</div>
</scroll>
<div class="bottom">
<div class="down">
<input type="text" ref="sendMsg" v-model="contentText" />
<button ref="btn" @click="sendText">发送</button>
</div>
</div>
</div>
</template>
<script>
import Scroll from 'base/scroll/scroll'
export default {
data () {
return {
ws: null,
count: 0,
userId: null,
list: [],
contentText: '' // input输入的值
}
},
created () {
this.getUserId()
},
mounted () {
this.initWebsocket()
this.$refs.sendMsg.focus()
},
updated () {
},
methods: {
getUserId () {
let time = new Date().getTime()
this.userId = time
},
// 滚动到底部
scrollBottm () {
let el = this.$refs.msgbox
el.scrollTop = el.scrollHeight
console.info(el.scrollHeight)
},
// 发送聊天消息
sendText () {
let _this = this
_this.$refs.sendMsg.focus()
if (!_this.contentText) {
return false
}
let params = {
userId: _this.userId,
msg: _this.contentText
}
if (_this.ws.readyState == 1) {
_this.ws.send(JSON.stringify(params)) // 调用WebSocket send()发送信息的方法
}
_this.contentText = ''
},
initWebsocket () {
let _this = this
// 判断页面有没有存在websocket连接
if (window.WebSocket) {
let ws = new WebSocket('ws://127.0.0.1:8080')
_this.ws = ws
console.log(ws)
ws.onopen = function (e) {
console.log('服务器连接成功')
}
ws.onclose = function () {
console.log('服务器连接关闭')
}
ws.onerror = function () {
console.log('服务器连接出错')
}
ws.onmessage = function (e) {
// 接收服务器返回的数据
let resData = JSON.parse(e.data)
if (resData.funName === 'userCount') {
_this.count = resData.users
_this.list = resData.chat
console.log(_this.list, '1234')
} else {
_this.list = [
..._this.list,
{ userId: resData.userId, content: resData.msg }
]
}
}
}
}
},
components: {
Scroll
},
watch: {
list () {
this.$refs.scorll.refresh()
}
}
}
</script>
<style scoped>
.message {
padding-top: 60px;
margin-bottom: 60px;
height: 100%;
overflow: hidden;
}
.header {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
background: blue;
color: #fff;
font-size: 18px;
position: fixed;
top: 0;
z-index: 2;
}
.bottom {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid #ccc;
}
.down {
display: flex;
align-items: center;
padding: 5px;
background: #fff;
}
.bottom input {
flex: 1;
height: 40px;
font-display: 18px;
}
.bottom button {
border: none;
width: 70px;
height: 44px;
background: blue;
color: #fff;
line-height: 40px;
text-align: center;
border-radius: 5px;
margin-left: 10px;
}
.msg-box {
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
margin: 20px 10px 0px 0px;
}
.avtive {
display: inline-block;
background: blue;
color: #fff;
padding: 10px;
font-size: 16px;
border-radius: 6px;
margin-right: 10px;
flex-wrap: wrap;
word-break: break-all;
max-width: 220px;
}
.header-avtor {
width: 40px !important;
height: 40px;
border-radius: 50%;
background: #ccc;
}
.avtive-left {
justify-content: flex-start;
}
</style>
node server.js 启动服务端
运行npm run dev即可
参考文章:https://www.jianshu.com/p/6e52493c3bae