vuewebsocket的使用,vue-websocket
这篇文章主要为大家详细介绍了Vue Websocket简单实现聊天功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue Websocket简单实现聊天功能的具体代码，供大家参考，具体内容如下
效果图：
聊天室
此篇文章是针对Websocket的简单了解和应用，利用Nodejs简单搭建一个服务器加以实现。
首先创建一个vue项目
然后再创建一个server文件夹，在终端上打开该文件夹，输入vue init(一直敲回车 键),最后再建一个server.js文件，如下图
代码如下：
server.js/
在计算机网络服务器文件终端下新公共管理安装- s ws
var userNum=0；//统计在线人数
var chatList=[]；//记录聊天记录
var WebSocketServer=require(ws ).服务器；
WSS=新WebSocketServer({ port:8181 })；//8181 与前端相对应
//调用广播广播，实现数据互通和实时更新
wss.broadcast=function (msg) {
WSS。客户。foreach(function each(client){
客户端发送(消息);
});
};
wss.on(连接，函数(ws) {
userNum//建立连接成功在线人数一
WSS。广播(JSON。stringify({ funName:用户计数，userNum，chat:chatList })；//建立连接成功广播一次当前在线人数
console.log(连接的客户端：，userNum)；
//接收前端发送过来的数据
ws.on(消息，函数(e) {
var resData=JSON.parse(e)
console.log(接收到来自克雷孟特的消息： resData.msg)
聊天列表。push({ userId:resdata。userId，content:resdata。msg })；//每次发送信息，都会把信息存起来，然后通过广播传递出去，这样此每次进来的用户就能看到之前的数据
WSS。广播(JSON。stringify({ userId:resdata。用户Id，消息：resdata。msg })；//每次发送都相当于广播一次消息
});
ws.on(close ，函数(e) {
userNum-；//建立连接关闭在线人数-1
WSS。广播(JSON。stringify({ funName:用户计数，userNum，chat:chatList })；//建立连接关闭广播一次当前在线人数
console.log(连接的客户端：，userNum)；
console.log(长连接已关闭)
})
})
console.log(服务器创建成功)
然后npm run start启动服务器
HelloWorld.vue(前端页面)
模板
div class=聊天框
页眉聊天室人数：{{count}}/header
div class=msg-box ref=msg-box
差异
列表中的v-for=(i，index
:key=index
消息
:style=i.userId==userId？伸缩方向：行-反向:
div class=user-head
差异
头
:style= ` background:HSL($ { get user head(I . userid， bck)}，88%，62%)；clip-path:polygon($ { get user head(I . userid， polygon)}% 0，100% 100%，0% 100%)；transform:rotate($ { get user head(I . userid， rotate)}deg)`
/div
/div
div class=用户消息
跨度
:style=i.userId==userId？浮动：对；:
:class=i.userId==userId？右:左
{{i.content}}/span
/div
/div
/div
div class=输入框
input type= text ref= sendMsg v-model= content text @ keyup。enter= send text()/
div class= BTN :class= {[ BTN-活动]:内容文本} @ click=发送文本()发送/div
/div
/div
/模板
脚本
导出默认值{
data() {
返回{
ws: null，
计数：0,
userId: null，//当前用户身份
列表：[],//聊天记录的数组
内容文本： //输入输入的值
};
},
已创建(){
这个。获取userid()；
},
已安装(){
这个。初始化web套接字()；
},
方法：{
//根据时间戳作为当前用户身份
getUserID() {
假设时间=新日期()。getTime()；
this.userId=time
},
//根据使用者辩证码生成一个随机头像
getUserHead(id，type) {
let ID=String(ID)；
if (type==bck) {
返回数字(id。子字符串(id。长度-3))；
}
if (type==polygon) {
返回数字(id。子字符串(id。长度-2))；
}
if (type==rotate) {
返回数字(id。子字符串(id。长度-3))；
}
},
//滚动条到底部
scrollBottm() {
让el=这个. refs[ msg-box ]；
埃尔。滚动顶部=El。滚动高度；
},
//发送聊天信息
sendText() {
让这个=这个
_这个refs[sendMsg].焦点();
如果(!_this.contentText) {
返回；
}
让params={
userId: _this.userId，
消息：_this.contentText
};
_这个。ws。发送(JSON。stringify(params))；//调用WebSocket发送()发送信息的方法
_这个。content text=
setTimeout(()={
_这个。scrollbottm()；
}, 500);
},
//进入页面创建求转发到连接
initWebSocket() {
让这个=这个
//判断页面有没有存在求转发到连接
如果（窗口WebSocket) {
//192.168.0.115 是我本地互联网协议(互联网协议)地址此处的：8181 端口号要与后端配置的一致
设ws=新的web套接字( 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) {
//接收服务器返回的数据
设resData=JSON。解析(数据)；
if(RES数据。funname==用户计数){
_这个。计数=RES数据。用户；
_这个。list=resdata。聊天；
控制台。日志(resdata。聊天)；
}否则{
_this.list=[
._this.list，
{ userId: resData.userId，content: resData.msg }
];
}
};
}
}
}
};
/脚本
样式lang=scss 范围。聊天框{
边距：0自动；
背景：# fafafa
位置：绝对；
身高：100%;
宽度：100%;
最大宽度：700像素；
标题{
位置：固定；
宽度：100%;
身高：3雷姆；
背景：# 409eff
最大宽度：700像素；
显示器：flex
对齐-内容：居中；
对齐-项目：居中；
字体粗细：粗体；
颜色：白色；
字体大小：1雷姆；
}。消息箱{
位置：绝对；
身高：calc(100%-6.5雷姆)；
宽度：100%;
页边距-顶部：3r em
溢出-y:滚动；消息{
宽度：95%;
最小身高：2.5雷姆；
边距：1雷姆0.5雷姆；
位置：相对；
显示器：flex
调整内容：弹性开始！重要；用户负责人{
最小宽度：2.5雷姆；
宽度：20%;
宽度：2.5雷姆；
身高：2.5雷姆；
边界半径：50%;
背景：# f1f1f1
显示器：flex
对齐-内容：居中；
对齐-项目：居中；头部{
宽度：1.2雷姆；
身高：1.2雷姆；
}
//位置：绝对；
}。用户消息{
宽度：80%;
//位置：绝对；
断字：全断；
位置：相对；
z指数：5;
跨度{
显示：内嵌-块；
填充：0.5雷姆0.7雷姆；
边界半径：0.5雷姆；
边距-顶部：0.2 RM
字体大小：0.88雷姆；
}。左侧{
背景：白色；
动画：向左0.5秒，请将两个1；
}。右{
背景：# 53a8ff
颜色：白色；
动画：向右0.5秒，两个都放松1；
}
@关键帧向左{
0% {
不透明度：0;
transform:平移x(-10px)；
}
100% {
不透明度：1;
transform:平移x(0px)；
}
}
@右关键帧{
0% {
不透明度：0;
transform:translate x(10px)；
}
100% {
不透明度：1;
transform:平移x(0px)；
}
}
}
}
}。输入框{
填充：0 0.5雷姆；
位置：绝对；
底部：0;
宽度：100%;
身高：3.5雷姆；
背景：# fafafa
盒影：0 0 5px # ccc
显示器：flex
justify-content:space-between；
对齐-项目：居中；
输入{
身高：2.3雷姆；
显示：内嵌-块；
宽度：100%;
填充：0.5雷姆；
边框：无；
边框半径：0.2毫米；
字体大小：0.88雷姆；
}。btn {
身高：2.3雷姆；
最小宽度：4毫米；
背景：# e0e0e0
填充：0.5雷姆；
字体大小：0.88雷姆；
颜色：白色；
文本对齐：居中；
边框半径：0.2毫米；
左边距：0.5雷姆；
过渡：0.5秒
}。BTN-活动{
背景：# 409eff
}
}
}
/风格
192.168.0.115是我本地的互联网协议(互联网协议)地址（默认是本地主机),你可以改成你自己的
然后npm run dev,就可以实现局域网聊天了，有无线的话可以用手机连着无线访问你的互联网协议(互联网协议)地址访问，没的话可以试下多开几个窗口，也是能看到效果的！
进入聊天室时和发送信息时服务器的打印日志
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。