微客导航 » 文章资讯 » 基于node+vue实现简单的WebSocket聊天功能

基于node+vue实现简单的WebSocket聊天功能

2023-08-02 12:43:04 295

首先，我需要用到node的nodejs-websocket模块

使用yarn进行安装

yarnaddnodejs-websocket--save

当然，你也可以用npm进行安装

npminodejs-websocket--save

安装完毕之后，我们开始写服务端的代码，首先，我用node在本地起了一个node服务器用来开启websocket服务

sock.js:

letws=require("nodejs-websocket");
console.log("开始建立链接");
ws.createServer(function(conn){
conn.on("text",function(str){
console.log("收到的信息为",str);
conn.send(`${str}（机器人`)
});
conn.on("close",function(code,reason){
console.log("关闭连接")
});
conn.on("error",function(code,reason){
console.log("异常关闭")
})
}).listen(8001);
console.log("链接建立完毕");

服务端主要是用nodejs-websocket用来开启服务，以及返回前端需要的值，这里我只是做了一个简单的处理，在接受值得后面加了一个‘机器人'的string,

然后，我们需要开启这个node服务，

命令后面的路径一定要找对，我是把sock.js放在了根目录的socket文件夹下面

执行

yarnsocket

最后，看我们的客户端，客户端我是想有一个输入框，然后有个聊天框：






.test3{
text-align:center;
}

.msg{
width:100px;
height:100px;
overflow:auto;
padding-top:5px;
border:1pxsolidred;
display:inline-block;
margin-bottom:6px;

.msg-item{
position:relative;
overflow:hidden;
p{
display:inline-block;
border-radius:40px;
background:#3C3D5A;
color:white;
float:left;
padding:2px12px;
margin:002px0;
max-width:70%;
text-align:left;
box-sizing:border-box;
}

&.mine{
p{
float:right;
background:aquamarine;
color:white;
}
}
}
}

看一下最终效果：

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

基于node+vue实现简单的WebSocket聊天功能

热门推荐

随机推荐