vue-socket,vuewebsocket聊天
本文主要详细介绍Vue express Socket的聊天功能。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享Vue express Socket实现聊天功能的具体代码，供大家参考。具体内容如下
实现聊天功能
具体功能
只是为了功能，界面没有美化。
1.输入消息，然后单击发送。所有用户都可以收到下面的消息。
2.输入用户id，然后单击连接以连接到相应的聊天。在另一个界面，输入上一页的userid然后点击发送给指定的人，这样上一页就可以打印输出，而其他页面不会收到，从而实现私聊的功能。
3.私聊没有具体的内容显示，但是可以收发消息。要显示私聊的内容，可以再添加一个私聊页面。
界面截图
项目准备
只介绍socket准备，不介绍Vue和express的构造。
前端 socket
固定
npm i vue-socket.io - save
引入
从“vue-socket.io”导入VueSocketIO
后台socket
固定
npm i套接字. io -保存
引入
将其添加到express-generator生成的bin/www文件夹中。
var io=require( socket . io )(server)
io.on(连接，(套接字)={
socket.on(排雷，(数据)={
console.log(数据)；
});
});
具体截图如下：
项目实现
Vue代码
HTMl代码
div class=home
userid:输入类型=text v-model=userid
昵称：输入类型=text v-model=name
消息：输入类型=text v-model=msg/
按钮@click=发送发送/按钮
Button @click=加入连接/button
Button @click=sendmsg 给指定的人/按钮
保险商实验所
li v-for=(item，index)in chat list :key= item . name index
{{ item.name }}表示：{{ item.msg }}
/李
/ul
/div
js代码
导出默认值{
姓名：家，
data() {
返回{
用户：[]，
消息： ，
聊天列表：[]，
名称： ，
用户id:“”
};
},
插座：{
//连接后台套接字
连接(){
console.log(套接字连接)；
},
//用户在后台调用以添加数据
发送消息(数据){
console.log(数据)；
this.chatList.push(数据)
},
//用户在后台调用打印数据。
接收消息(数据){
console . log( receive msg )；
console.log(数据)；
}
},
方法：{
//向后台发送消息
send() {
//使用emit调用后台套接字中的message方法。
这个。$socket.emit(message ，{
userid: 100，
名称：this.name，
味精：this.msg
});
},
//建立用户连接
join() {
这个。$socket.emit(join ，{
userid: this.userid
});
},
//发送消息到后台进行私信发送
sendmsg() {
这个。$socket.emit(sendmsg ，{
userid: this.userid
味精：this.msg
});
}
}
};
express代码
将代码添加到刚才在www文件中定义的连接中。
//用来存储每个用户的socket，实现私聊的功能。
设arrAllSocket={}
//穿套连接
io.on(连接，(套接字)={
console . log( connected )；
//console . log(socket)；
//join函数用于用户连接
socket.on(join ，function (obj) {
console.log(obj.userid join )
//保存每个用户的连接状态，用于私信发送。
arrall socket[obj . userid]=socket
})
//接收前台发送的消息的函数名是message。
socket.on(message ，(data)={
console.log(数据)；
//将消息发回前台(调用前台定义的方法)。函数名为sendMessage。
io.emit(sendMessage ，data)；
});
//私信
socket.on(sendmsg ，function (data) {
console.log(数据)；
//查询用户连接
let target=arrall socket[data . userid]
如果(目标){
//向指定的人发送信息
target.emit(receivemsg ，data)
}
})
})
后台代码封装
由于www文件不应该写太多代码，所以这部分代码是封装的。
1.使用以下结构在项目目录中创建一个io文件夹
2.将刚才的代码移到io/index.js中
代码如下所示
//将服务器作为参数传入
module.exports=函数(服务器){
var io=require(socket.io )(服务器)；
//用来存储每个用户的socket，实现私聊的功能。
设arrAllSocket={}
//穿套连接
io.on(连接，(套接字)={
console . log( connected )；
//console . log(socket)；
//join函数用于用户连接
socket.on(join ，function (obj) {
console.log(obj.userid join )
//保存每个用户的连接状态，用于私信发送。
arrall socket[obj . userid]=socket
})
//接收前台发送的消息的函数名是message。
socket.on(message ，(data)={
console.log(数据)；
//将消息发回前台(调用前台定义的方法)。函数名为sendMessage。
io.emit(sendMessage ，data)；
});
//私信
socket.on(sendmsg ，function (data) {
console.log(数据)；
//查询用户连接
let target=arrall socket[data . userid]
如果(目标){
//向指定的人发送信息
target.emit(receivemsg ，data)
}
})
})
}
最后，在www文件中使用以下代码导入文件
var io=require(./io’)
io(服务器)
至此，聊天的基本功能实现了。记录下来以备后用。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。