vue-websocket 组件教程(Vue+express+Socket实现聊天功能)
类别:编程学习 浏览量:875
时间:2021-10-28 10:04:42 vue-websocket 组件教程
Vue+express+Socket实现聊天功能本文实例为大家分享了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代码
<li 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> </li>
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)
至此,聊天的基本功能实现。记录一下方便以后使用。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue 动态绑定指令(vue动态绑定图标的完整步骤)
- django框架教程第100讲(详解Django+Vue+Docker搭建接口测试平台实战)
- vue请求token无效(关于Vue 消除Token过期时刷新页面的重复提示问题)
- vue项目部署到服务器的nginx(Nginx部署vue项目和配置代理的问题解析)
- vue实现添加购物车小球(Vue实现简易购物车案例)
- vue接收网络请求数据类型配置(vue中对接Graphql接口的实现示例)
- vue3.0带参数的方法(Vue3中ref与toRef的区别浅析)
- vue 选中背景高亮(vue 如何设置背景颜色及透明度)
- 数组循环遍历展示vue(Vue中foreach数组与js中遍历数组的写法说明)
- vue怎么实现拖动(Vue拖动截图功能的简单实现方法)
- vue-cli4开发多页面应用(深入理解Vue-cli4路由配置)
- vue常用的指令和修饰符(Vue中 Vue.prototype使用详解)
- vue项目的一些手动配置(使用vue项目配置多个代理的注意点)
- vue-cli安装教程学习(Vue新手指南之创建第一个vue-cli脚手架程序)
- vue界面自动生成(Vue中实现3D标签云的详细代码)
- vue pdf预览插件(Vue-pdf实现在线预览PDF文件)
- 红色代表什么(红色代表什么情感和含义)
- 高中数学题(高中数学题型总结及解题方法)
- 冰岛旅游攻略(冰岛旅游攻略及花费)
- 为什么现在年轻人越来越喜欢买衣服(为什么现在年轻人越来越喜欢买衣服穿)
- 怎么做好SEO(怎么做好seo内容优化)
- 冬季钓鱼子线用 长 还是 短(冬季钓鱼子线用)
热门推荐
- python列表反转的方法(Python实现的列表排序、反转操作示例)
- laravel框架运行找不到视图(解决laravel资源加载路径设置的问题)
- mysql binlog模式实际使用(实例验证MySQL|update字段为相同的值是否会记录binlog)
- sql语句delete的用法(SQL删除语句DROP、TRUNCATE、 DELETE 的区别)
- dedecms安全补丁(防止Dedecms入侵、漏洞问题的4点安全防范建议)
- 何谓SQLSERVER参数嗅探问题(何谓SQLSERVER参数嗅探问题)
- Uncaught RangeError: Maximum call stack size exceeded的常见原因
- python函数基本操作(Python定义函数功能与用法实例详解)
- python数组与矩阵转换(python 读取文件并把矩阵转成numpy的两种方法)
- JavaScriptSerializer对Json对象的序列化和反序列化