当前位置: 首页 > news >正文

websocket实现聊天室(vue2 + node)

通过websocket实现简单的聊天室功能

需求分析如图:

在这里插入图片描述

搭建的项目结构如图:

在这里插入图片描述
前端步骤:

  1. vue create socket_demo (创建项目)
  2. views下面建立Home , Login组件
  3. 路由里面配置路径
  4. Home组件内部开启websocket连接

前端相关组件代码:
Login组件

<!-- Login.vue -->
<template><div><input type="text" placeholder="请输入用户名" v-model="username">&nbsp;&nbsp;<button @click="enterRoom">进入聊天室</button></div>
</template><script>
export default {name: 'login',data() {return {username: '',}},methods: {enterRoom() {let username = this.username.trim()if (username.length < 6) {alert('用户名小于6位,请重新输入!')return}// 保存用户名localStorage.setItem('username', username)// 进入首页this.$router.push('/')},}
}
</script><style></style>

Home组件

<!-- Home.vue -->
<template><div><ul><li v-for="item in msgList" :key="item.id"><p><span>{{item.user}}</span><span>{{new Date(item.dateTime)}}</span></p><p>消息:{{item.msg}}</p></li></ul><input type="text" placeholder="请输入消息" v-model="msg">&nbsp;&nbsp;<button @click="sendMsg">发送</button></div>
</template><script>
let ws = new WebSocket('ws://localhost:8000')
export default {name: 'home',data() {return {msg: '',username: '',msgList: []}},mounted() {this.username = localStorage.getItem('username')if (!this.username) {this.$router.push('/login')return}ws.onopen = (e) => {console.log('WebSocket opne ', e);}ws.onclose = (e) => {console.log('WebSocket onclose ', e);}ws.onerror = (e) => {console.log('WebSocket onerror ', e);}// 接收服务端发送过来的消息ws.onmessage = (e) => {// console.log('WebSocket onmessage ', e);flet msg = JSON.parse(e.data)// console.log('msg', msg);this.msgList.push(msg)}},methods: {// 发送消息sendMsg() {if (!this.msg) {return}let obj = {id: Math.floor(Math.random() * 100),user: this.username,dateTime: new Date().getTime(),msg: this.msg}ws.send(JSON.stringify(obj))this.msg = ''},}}
</script><style></style>

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'Vue.use(VueRouter)const routes = [{path: '/login',name: 'login',component: Login},{path: '/',name: 'home',component: () => import('../views/Home.vue')}
]const router = new VueRouter({routes,mode: 'history'
})export default router

后端步骤:

  1. 在项目外层创建server文件夹(src目录同级)
  2. npm init -y创建安装包
  3. npm i ws (安装websocket的插件ws)
  4. index.js 文件内部开启服务,初始化相关事件

后端服务的启动:server下面建立index.js文件,package.json里面配置命令,npm run dev启动
在这里插入图片描述

index.js文件

const Ws = require('ws');((Ws) => {// 开启服务const server = new Ws.Server({host: 'localhost',port: 8000})const init = () => {bindEvent()}// 初始化相关事件function bindEvent() {server.on('open', handleOpen)server.on('close', handleClose)server.on('error', handleError)server.on('connection', handleConnection)}function handleOpen() {console.log('websocket open');}function handleClose() {console.log('websocket Close');}function handleError() {console.log('websocket Error');}function handleConnection(ws) {console.log('websocket Connection');ws.on('message', handleMessage)}function handleMessage(msg) {// console.log('msg', msg.toString());let message = msg.toString()// 获取所有和服务端连接的客户端,并向它们推送消息server.clients.forEach(c => {c.send(message)})}init()
})(Ws);

效果图:
在这里插入图片描述

相关文章:

websocket实现聊天室(vue2 + node)

通过websocket实现简单的聊天室功能 需求分析如图&#xff1a; 搭建的项目结构如图&#xff1a; 前端步骤&#xff1a; vue create socket_demo (创建项目)views下面建立Home , Login组件路由里面配置路径Home组件内部开启websocket连接 前端相关组件代码&#xff1a; Login…...

RabbitMQ-消息延迟

一、死信交换机 1、描述 一个队列接收到的消息有过期时间&#xff0c;消息过期之后&#xff0c;如果配置有死信队列&#xff0c;消息就会进去死信队列。 2、图解 3、过程 当生产者将消息发送到exchange1&#xff0c;然后交换机将消息路由到队列queue1&#xff0c;但是队列que…...

【Oracle】如何给物化视图分区

文章目录 【Oracle】如何给物化视图分区给物化视图进行分区的例 【声明】文章仅供学习交流&#xff0c;观点代表个人&#xff0c;与任何公司无关。 编辑|SQL和数据库技术(ID:SQLplusDB) 收集Oracle数据库内存相关的信息 【Oracle】ORA-32017和ORA-00384错误处理 【Oracle】设置…...

10个常考的前端手写题,你全都会吗?

前言 &#x1f4eb; 大家好&#xff0c;我是南木元元&#xff0c;热爱技术和分享&#xff0c;欢迎大家交流&#xff0c;一起学习进步&#xff01; &#x1f345; 个人主页&#xff1a;南木元元 今天来分享一下10个常见的JavaScript手写功能。 目录 1.实现new 2.call、apply、…...

vue组件间通信

Vue组件之间通信方式有哪些 一、父子组件通讯 1、props&#xff0c;emit 父组件可以通过props给子组件传递变量。子组件可以通过emit派发自定义事件&#xff0c;使父组件可以获得事件函数传递过来的形参。 2、$parent、$children、ref 父组件可以通过 c h i l d r e n 获取…...

编程框架概述:MVC, MVP, MVVM, Flux/Redux, 和 Clean Architecture

前言 在软件开发中&#xff0c;选择合适的编程框架和架构模式对于构建可维护和可扩展的应用程序至关重要。初学者在面对多种架构选项时可能会感到困惑。本文将详细介绍五种流行的编程框架&#xff1a;MVC、MVP、MVVM、Flux/Redux和Clean Architecture。 MVC&#xff08;Model-V…...

多维时序 | Matlab实现CNN-BiLSTM-Mutilhead-Attention卷积双向长短期记忆神经网络融合多头注意力机制多变量时间序列预测

多维时序 | Matlab实现CNN-BiLSTM-Mutilhead-Attention卷积双向长短期记忆神经网络融合多头注意力机制多变量时间序列预测 目录 多维时序 | Matlab实现CNN-BiLSTM-Mutilhead-Attention卷积双向长短期记忆神经网络融合多头注意力机制多变量时间序列预测效果一览基本介绍程序设计…...

np.argsort排序问题(关于位次)-含GitHub上在numpy项目下提问的回复-总结可行方案

np.argsort 与获取位相关问题 位次: 数组中的数据在其排序之后的另一个数组中的位置 [1,0,2,3] 中 0的位次是1 1的位次是2 2的位次是3 3的位次是4 这里先直接给出结论&#xff0c;np.argsort()返回的索引排序与实际位次在确实在某些情况下会出现一致&#xff0c;但后来numpy的开…...

Element中的el-input-number+SpringBoot+mysql

1、编写模板 <el-form ref"form" label-width"100px"><el-form-item label"商品id&#xff1a;"><el-input v-model"id" disabled></el-input></el-form-item><el-form-item label"商品名称&a…...

Jupyter Notebook五分钟基础速通

1 作用 常用于数据分析 2 安装 2.1 Anaconda 通过直接安装Anaconda&#xff0c;会自动安装Jupyter Notebook 2.2 命令行安装 ① 3.x版本 pip3 install --upgrade pip pip3 install jupyter ② 2.x版本 pip install --upgrade pip pip install jupyter 3 启动 cmd窗口下…...

基于SpringBoot的SSM整合案例

项目目录: 数据库表以及表结构 user表结构 user_info表结构 引入依赖 父模块依赖: <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.2.12.RELEASE</version>…...

[SS]语义分割_转置卷积

转置卷积&#xff08;Transposed Convolution&#xff09; 抽丝剥茧&#xff0c;带你理解转置卷积&#xff08;反卷积&#xff09; 目录 一、概念 1、定义 2、运算步骤 二、常见参数 一、概念 1、定义 转置卷积&#xff08;Transposed Convolution&#xff09;&#xf…...

面板小程序命令行工具介绍

Ray 体系提供配套的工程化解决方案。 由于多端构建的一些客观原因&#xff0c;在构建流程的设计上&#xff0c;必须将工程套件安装在项目内。 项目内的依赖至少包含以下内容&#xff1a; {"dependencies": {"ray-js/ray": "latest"},"de…...

DBA技术栈MongoDB: 数据增改删除

该博文主要介绍mongoDB对文档数据的增加、更新、删除操作。 1.插入数据 以下案例演示了插入单个文档、多个文档、指定_id、指定多个索引以及插入大量文档的情况。在实际使用中&#xff0c;根据需求选择适合的插入方式。 案例1&#xff1a;插入单个文档 db.visitor.insert({…...

Xcode查看APP文件目录

一、连接真机到MAC电脑上 二、打开Devices 点击window -> Devices and Simulatores 三、选中设备、选择app 四、选择下载内容 五、查看文件内容 得到的文件 右键显示包内容&#xff0c;获得APP内数据 六、分发证书无法下载 使用分发的证书无法下载文件内容&#xf…...

【视频媒体】深入了解直播视频流

深入了解直播视频流&#x1f3a5; YouTube、TikTok live和Twitch上的直播视频是如何工作的&#xff1f; 直播视频流与常规流媒体不同&#xff0c;因为视频内容通过互联网近乎实时发送&#xff0c;通常只有几秒钟的延迟。 下图解释了实现这一目标背后所发生的事情。 步骤1&…...

【01】mapbox js api加载arcgis切片服务

需求&#xff1a; 第三方的mapbox js api加载arcgis切片服务&#xff0c;同时叠加在天地图上&#xff0c;天地图坐标系web墨卡托。 效果图&#xff1a; 形如这种地址去加载http://zjq2022.gis.com:8080/demo/loadmapboxtdt.html 思路&#xff1a; 需要制作一个和天地图比例…...

图像分割实战-系列教程15:deeplabV3+ VOC分割实战3-------网络结构1

&#x1f341;&#x1f341;&#x1f341;图像分割实战-系列教程 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Pycharm中进行 本篇文章配套的代码资源已经上传 deeplab系列算法概述 deeplabV3 VOC分割实战1 deeplabV3 VOC分割实战2 deeplabV3 VOC分割实战3 dee…...

【Docker】安装nacos以及实现负载均衡

&#x1f973;&#x1f973;Welcome 的Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于Docker的相关操作吧 目录 &#x1f973;&#x1f973;Welcome 的Huihuis Code World ! !&#x1f973;&#x1f973; 前言 一.nacos单个部署 1.镜像拉取 …...

如何用数据赋能社媒营销决策?

在数字化时代&#xff0c;越来越多的商家开始意识到数据分析对于改善经营的重要性。 传统决策更多依赖过往经验、商业直觉、他人的思路模板等方法&#xff0c;或者依靠描述性统计、简单的数据分析。在数字时代&#xff0c;则通过精细化数据分析&#xff0c;做出更明智的营销决策…...

浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...