Vue+Websocket简单实现聊天功能
本文实例为大家分享了Vue+Websocket简单实现聊天功能的具体代码,供大家参考,具体内容如下
效果图:
聊天室
此篇文章是针对Websocket的简单了解和应用,利用Nodejs简单搭建一个服务器加以实现。
首先创建一个vue项目
然后再创建一个server文件夹,在终端上打开该文件夹,输入vue init(一直敲 "回车" 键),最后再建一个server.js文件,如下图
代码如下:
server.js/
在server文件终端下 npm install --s ws
var userNum = 0; //统计在线人数 var chatList = [];//记录聊天记录 var WebSocketServer = require('ws').Server; wss = new WebSocketServer({ port: 8181 }); //8181 与前端相对应 //调用 broadcast 广播,实现数据互通和实时更新 wss.broadcast = function (msg) { wss.clients.forEach(function each(client) { client.send(msg); }); }; wss.on('connection', function (ws) { userNum++;//建立连接成功在线人数 +1 wss.broadcast(JSON.stringify({ funName: 'userCount', users: userNum, chat: chatList })); //建立连接成功广播一次当前在线人数 console.log('Connected clients:', 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--;//建立连接关闭在线人数 -1 wss.broadcast(JSON.stringify({ funName: 'userCount', users: userNum, chat: chatList }));//建立连接关闭广播一次当前在线人数 console.log('Connected clients:', userNum); console.log('长连接已关闭') }) }) console.log('服务器创建成功')
然后npm run start启动服务器
HelloWorld.vue(前端页面)
<template> <div class="chat-box"> <header>聊天室人数:{{count}}</header> <div class="msg-box" ref="msg-box"> <div v-for="(i,index) in list" :key="index" class="msg" :style="i.userId == userId?'flex-direction:row-reverse':''" > <div class="user-head"> <div class="head" :style="` background: hsl(${getUserHead(i.userId,'bck')}, 88%, 62%); clip-path:polygon(${getUserHead(i.userId,'polygon')}% 0,100% 100%,0% 100%); transform: rotate(${getUserHead(i.userId,'rotate')}deg)`" ></div> </div> <div class="user-msg"> <span :style="i.userId == userId?' float: right;':''" :class="i.userId == userId?'right':'left'" >{{i.content}}</span> </div> </div> </div> <div class="input-box"> <input type="text" ref="sendMsg" v-model="contentText" @keyup.enter="sendText()" /> <div class="btn" :class="{['btn-active']:contentText}" @click="sendText()">发送</div> </div> </div> </template> <script> export default { data() { return { ws: null, count: 0, userId: null, //当前用户ID list: [], //聊天记录的数组 contentText: "" //input输入的值 }; }, created() { this.getUserID(); }, mounted() { this.initWebSocket(); }, methods: { //根据时间戳作为当前用户ID getUserID() { let time = new Date().getTime(); this.userId = time; }, //根据userID生成一个随机头像 getUserHead(id, type) { let ID = String(id); if (type == "bck") { return Number(ID.substring(ID.length - 3)); } if (type == "polygon") { return Number(ID.substring(ID.length - 2)); } if (type == "rotate") { return Number(ID.substring(ID.length - 3)); } }, //滚动条到底部 scrollBottm() { let el = this.$refs["msg-box"]; el.scrollTop = el.scrollHeight; }, //发送聊天信息 sendText() { let _this = this; _this.$refs["sendMsg"].focus(); if (!_this.contentText) { return; } let params = { userId: _this.userId, msg: _this.contentText }; _this.ws.send(JSON.stringify(params)); //调用WebSocket send()发送信息的方法 _this.contentText = ""; setTimeout(() => { _this.scrollBottm(); }, 500); }, //进入页面创建websocket连接 initWebSocket() { let _this = this; //判断页面有没有存在websocket连接 if (window.WebSocket) { // 192.168.0.115 是我本地IP地址 此处的 :8181 端口号 要与后端配置的一致 let ws = new WebSocket("ws://192.168.0.115:8181"); _this.ws = ws; ws.onopen = function(e) { console.log("服务器连接成功"); }; ws.onclose = function(e) { 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(resData.chat); } else { _this.list = [ ..._this.list, { userId: resData.userId, content: resData.msg } ]; } }; } } } }; </script> <style lang="scss" scoped> .chat-box { margin: 0 auto; background: #fafafa; position: absolute; height: 100%; width: 100%; max-width: 700px; header { position: fixed; width: 100%; height: 3rem; background: #409eff; max-width: 700px; display: flex; justify-content: center; align-items: center; font-weight: bold; color: white; font-size: 1rem; } .msg-box { position: absolute; height: calc(100% - 6.5rem); width: 100%; margin-top: 3rem; overflow-y: scroll; .msg { width: 95%; min-height: 2.5rem; margin: 1rem 0.5rem; position: relative; display: flex; justify-content: flex-start !important; .user-head { min-width: 2.5rem; width: 20%; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #f1f1f1; display: flex; justify-content: center; align-items: center; .head { width: 1.2rem; height: 1.2rem; } // position: absolute; } .user-msg { width: 80%; // position: absolute; word-break: break-all; position: relative; z-index: 5; span { display: inline-block; padding: 0.5rem 0.7rem; border-radius: 0.5rem; margin-top: 0.2rem; font-size: 0.88rem; } .left { background: white; animation: toLeft 0.5s ease both 1; } .right { background: #53a8ff; color: white; animation: toright 0.5s ease both 1; } @keyframes toLeft { 0% { opacity: 0; transform: translateX(-10px); } 100% { opacity: 1; transform: translateX(0px); } } @keyframes toright { 0% { opacity: 0; transform: translateX(10px); } 100% { opacity: 1; transform: translateX(0px); } } } } } .input-box { padding: 0 0.5rem; position: absolute; bottom: 0; width: 100%; height: 3.5rem; background: #fafafa; box-shadow: 0 0 5px #ccc; display: flex; justify-content: space-between; align-items: center; input { height: 2.3rem; display: inline-block; width: 100%; padding: 0.5rem; border: none; border-radius: 0.2rem; font-size: 0.88rem; } .btn { height: 2.3rem; min-width: 4rem; background: #e0e0e0; padding: 0.5rem; font-size: 0.88rem; color: white; text-align: center; border-radius: 0.2rem; margin-left: 0.5rem; transition: 0.5s; } .btn-active { background: #409eff; } } } </style>
192.168.0.115是我本地的IP地址(默认是 localhost ),你可以改成你自己的
然后npm run dev,就可以实现局域网聊天了,有无线的话可以用手机连着无线访问你的IP地址访问,🙃没的话可以试下多开几个窗口,也是能看到效果的!!
进入聊天室时和发送信息时服务器的打印日志
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)