Vue+express+Socket实现聊天功能
作者:零度°K 发布时间:2024-06-05 09:19:03
标签:vue,聊天
本文实例为大家分享了Vue+express+Socket实现聊天功能的具体代码,供大家参考,具体内容如下
实现聊天功能
具体功能
只是为了实现功能,不对界面进行美化
1、输入消息点击发送所有用户可以在下方收到消息
2、输入userid后点击连接,可以连接对应的聊天,另外一个界面输入刚刚那个页面的userid后再输入内容点击发送给指定的人,则刚才那个页面可以打印输出,而其他页面不会收到,实现私聊的功能
3、没有具体实现私聊的内容显示,但是接收发送消息都可以实现,要实现私聊的内容显示可以再添加一个私聊页面
界面截图
项目准备
只对socket准备进行介绍,Vue和express的搭建不进行介绍
前端 socket
安装
npm i vue-socket.io --save
导入
import VueSocketIO from 'vue-socket.io'
后台socket
安装
npm i socket.io --save
导入
在express-generator生产的bin/www文件夹中加入
var io = require('socket.io')(server)'
io.on('connection', (socket) => {
socket.on('demining', (data) => {
console.log(data);
});
});
具体截图如下:
项目实现
Vue代码
HTMl代码
<div class="home">
userid: <input type="text" v-model="userid">
昵称:<input type="text" v-model="name">
消息:<input type="text" v-model="msg" />
<button @click="send">发送</button>
<button @click="join">连接</button>
<button @click="sendmsg">发送给指定的人</button>
<ul>
<li v-for="(item,index) in chatList" :key="item.name + index">
{{ item.name }}说:{{ item.msg }}
</li>
</ul>
</div>
js代码
export default {
name: "Home",
data() {
return {
users: [],
msg: "",
chatList: [],
name: '',
userid: ''
};
},
sockets: {
// 连接后台socket
connect() {
console.log('socket connected');
},
// 用户后台调用,添加数据
sendMessage(data) {
console.log(data);
this.chatList.push(data)
},
// 用户后台调用,打印数据
receivemsg(data) {
console.log('receivemsg');
console.log(data);
}
},
methods: {
// 发送消息给后台
send() {
// 使用emit调用后台的socket中的message方法
this.$socket.emit("message", {
userid: 100,
name: this.name,
msg: this.msg
});
},
// 建立用户连接
join() {
this.$socket.emit("join", {
userid: this.userid
});
},
// 发送消息给后台 用于私发消息
sendmsg() {
this.$socket.emit("sendmsg", {
userid: this.userid,
msg: this.msg
});
}
}
};
express代码
在刚才的www文件定义的连接中添加一下代码
// 用于存储每个用户的socket,实现私聊的功能
let arrAllSocket = {}
// 穿件socket连接
io.on('connection', (socket) => {
console.log('连接上了');
// console.log(socket);
// join函数 用于用户连接
socket.on('join', function (obj) {
console.log(obj.userid + 'join')
// 保存每个用户的连接状态 用于私发消息
arrAllSocket[obj.userid] = socket
})
// 接收前台发送的消息 函数名为message
socket.on('message', (data) => {
console.log(data);
// 将消息发送回前台(调用前台定义的方法) 函数名为sendMessage
io.emit('sendMessage', data);
});
// 私发消息
socket.on('sendmsg', function (data) {
console.log(data);
// 查询用户连接
let target = arrAllSocket[data.userid]
if (target) {
//发送信息至指定的人
target.emit('receivemsg', data)
}
})
})
后台代码封装
由于www文件不应该写太多代码,所以对这一部分代码进行封装
1、在项目目录下创建一个io的文件夹,结构如下
2、将刚才的那部分代码移入io/index.js中
代码如下
// 将server作为参数传入
module.exports = function (server) {
var io = require('socket.io')(server);
// 用于存储每个用户的socket,实现私聊的功能
let arrAllSocket = {}
// 穿件socket连接
io.on('connection', (socket) => {
console.log('连接上了');
// console.log(socket);
// join函数 用于用户连接
socket.on('join', function (obj) {
console.log(obj.userid + 'join')
// 保存每个用户的连接状态 用于私发消息
arrAllSocket[obj.userid] = socket
})
// 接收前台发送的消息 函数名为message
socket.on('message', (data) => {
console.log(data);
// 将消息发送回前台(调用前台定义的方法) 函数名为sendMessage
io.emit('sendMessage', data);
});
// 私发消息
socket.on('sendmsg', function (data) {
console.log(data);
// 查询用户连接
let target = arrAllSocket[data.userid]
if (target) {
//发送信息至指定的人
target.emit('receivemsg', data)
}
})
})
}
最后在www文件中使用如下代码,引入文件
var io = require('../io')
io(server)
至此,聊天的基本功能实现。记录一下方便以后使用。
来源:https://blog.csdn.net/qq_40639292/article/details/107934908


猜你喜欢
- 作为一个运维开发,不像业务开发只专注后端业务开发即可,常常需要自己来构建前端的东西,当然系统交互体验说的过去就行,要求也没有业务系统那么高。
- 关于python读取xml文章很多,但大多文章都是贴一个xml文件,然后再贴个处理文件的代码。这样并不利于初学者的学习,希望这篇文章可以更通
- 由于是上线的项目且已经按照数据逻辑去渲染了能看懂的看逻辑吧。有点多效果如图<template> <div class=&q
- 随着信息技术的飞速发展,数据处理不仅在数量上要求越来越大,而且在质量上也要求越来越高。操作系统的稳定对数据库来说是十分紧要的,在数据库可操作
- 1、 在vue文件的html中引入element的上传控件,代码如下:<div> <el-upload action=&q
- 下面的路径介绍针对windows在编写的py文件中打开文件的时候经常见到下面其中路径的表达方式:open('aaa.txt'
- 段落还原保持进行检查,以便确保数据库在结束时将是一致的。 在还原顺序结束后,如果恢复的文件有效并且与数据库一致,则恢复的文件将直接变为联机状
- tensorflow中tf.concat的axis的使用我一直理解的比较模糊,这次做个笔记理下自己的思路。import tensorflow
- python使用函数改变list函数内改变外部的一个list如果这么写def rotate(nums, k): l
- 这段时间看了关于在SQL server 中通过日志和时间点来恢复数据。也看了一些网上的例子,看如何通过日志来恢复数据。 前提条件:数据库的故
- 使用ES做搜索引擎拉取数据的时候,如果数据量太大,通过传统的from + size的方式并不能获取所有的数据(默认最大记录数10000),因
- 1.简介和安装sysbench是一个开源的、模块化的、跨平台的多线程性能测试工具,可以用来进行CPU、内存、磁盘I/O、线程、数据库的性能测
- 如下所示:import osDIR = "/home/serho/workspace/lisp"def compare(
- 近些时间在开始学MySQL,安装挺顺利的,按照网上现成的教程就能安装成功。但是,在输入mysql -uroot -p再输入密码时,遇到了这个
- 1.视图a.CREATEALGORITHM = UNDEFINEDDEFINER = `root`@`localhost`SQL SECUR
- 1.最小界面组成# 导入tkinter模块import tkinter# 创建主窗口对象root = tkinter.Tk()# 设置窗口大
- 如下所示:Traceback (most recent call last):File "<stdin>",
- 计算Python Numpy向量之间的欧氏距离,已知vec1和vec2是两个Numpy向量,欧氏距离计算如下:import numpydis
- 1. copy.copy 浅拷贝 只拷贝父对象,不会拷贝对象的内部的子对象。2. copy.deepcopy 深拷贝 拷贝对象及其子对象一个
- 我们在使用pycharm的时候总是很喜欢其强大的代码提示功能,只需ctrl+左键就可以查看源码,"."也能显示所含的函数