vue+websocket，实现简易聊天室

1.安装vue-cli
2.init 初始化项目
3.npm install ws(websocket)
4.文件夹中创建server.js

var userNum &＃61; 0 // 统计人数
var chatList &＃61; []// 记录聊天内容
var WebSocketServer &＃61; require(&＃39;ws&＃39;).Server// 引入 ws
// 端口对应
var wss &＃61; new WebSocketServer({ port: 8080 })
// 调用broadcast广播&＃xff0c;实现数据互通和实时更新
wss.broadcast &＃61; function (msg) {wss.clients.forEach(function (item) {item.send(msg)})
}
// 监听连接
wss.on(&＃39;connection&＃39;, function (ws) {userNum&＃43;&＃43;wss.broadcast(JSON.stringify({ funName: &＃39;userCount&＃39;, users: userNum, chat: chatList })) // 建立连接成功广播一次当前在线人数console.log(&＃39;连接人数:&＃39;, userNum)// 接受前端发来消息ws.on(&＃39;message&＃39;, function (e) {var resData &＃61; JSON.parse(e) // 消息处理 字符串转为对象console.log(&＃39;接收到来自clent的消息&＃xff1a;&＃39; &＃43; resData.msg)// 每次发送信息&＃xff0c;都会把信息存起来&＃xff0c;然后通过广播传递出去&＃xff0c;这样此每次进来的用户就能看到之前的数据chatList.push({ userId: resData.userId, content: resData.msg })// 每次发送都相当于广播一次消息wss.broadcast(JSON.stringify({ userId: resData.userId, msg: resData.msg }))})ws.on(&＃39;close&＃39;, function (e) {userNum--// 建立连接关闭广播一次当前在线人数wss.broadcast(JSON.stringify({ funName: &＃39;userCount&＃39;, users: userNum, chat: chatList }))console.log(&＃39;Connected clients:&＃39;, userNum)console.log(&＃39;长连接已关闭&＃39;)})
})
console.log(&＃39;服务器创建成功&＃39;)

<template><div class&＃61;"chat-box"><div class&＃61;"header">聊天室人数:{{count}}</div><scroll class&＃61;"message" ref&＃61;"scorll" :data&＃61;"list"><div><div class&＃61;"msg-box" ref&＃61;"msgbox" v-for&＃61;"(item,index) in list" :key&＃61;"index"><span>{{item.content}}</span><div class&＃61;"header-avtor"></div></div></div></scroll><div class&＃61;"bottom"><div class&＃61;"down"><input type&＃61;"text" ref&＃61;"sendMsg" v-model&＃61;"contentText" /><button ref&＃61;"btn" &＃64;click&＃61;"sendText">发送</button></div></div></div>
</template>
<script>
import Scroll from &＃39;base/scroll/scroll&＃39;
export default {data () {return {ws: null,count: 0,userId: null,list: [],contentText: &＃39;&＃39; // input输入的值}},created () {this.getUserId()},mounted () {this.initWebsocket()this.$refs.sendMsg.focus()},updated () {},methods: {getUserId () {let time &＃61; new Date().getTime()this.userId &＃61; time},// 滚动到底部scrollBottm () {let el &＃61; this.$refs.msgboxel.scrollTop &＃61; el.scrollHeightconsole.info(el.scrollHeight)},// 发送聊天消息sendText () {let _this &＃61; this_this.$refs.sendMsg.focus()if (!_this.contentText) {return false}let params &＃61; {userId: _this.userId,msg: _this.contentText}if (_this.ws.readyState &＃61;&＃61; 1) {_this.ws.send(JSON.stringify(params)) // 调用WebSocket send()发送信息的方法}_this.contentText &＃61; &＃39;&＃39;},initWebsocket () {let _this &＃61; this// 判断页面有没有存在websocket连接if (window.WebSocket) {let ws &＃61; new WebSocket(&＃39;ws://127.0.0.1:8080&＃39;)_this.ws &＃61; wsconsole.log(ws)ws.onopen &＃61; function (e) {console.log(&＃39;服务器连接成功&＃39;)}ws.onclose &＃61; function () {console.log(&＃39;服务器连接关闭&＃39;)}ws.onerror &＃61; function () {console.log(&＃39;服务器连接出错&＃39;)}ws.onmessage &＃61; function (e) {// 接收服务器返回的数据let resData &＃61; JSON.parse(e.data)if (resData.funName &＃61;&＃61;&＃61; &＃39;userCount&＃39;) {_this.count &＃61; resData.users_this.list &＃61; resData.chatconsole.log(_this.list, &＃39;1234&＃39;)} else {_this.list &＃61; [..._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即可
参考文章&＃xff1a;https://www.jianshu.com/p/6e52493c3bae