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

websocket+node+vite(vue)实现一个简单的聊天

1.前端逻辑

本项目基于之前搭建的vite环境:https://blog.csdn.net/beekim/article/details/128083106?spm=1001.2014.3001.5501

新增一个登录页和聊天室页面

<template><div>登录页</div><div>用户名:<input type="text" placeholder="请输入用户名" v-model="username" /><br /><button @click="enter">进入聊天室</button></div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
const username = ref();const { replace } = useRouter();onMounted(() => {username.value = localStorage.getItem("_username");if (username.value) {replace({ path: "/chatRoom" });}
});const enter = () => {const _username = username.value.trim();if (_username.length > 0) {localStorage.setItem("_username", _username);//缓存当前登录人replace({ path: "/chatRoom" });}
};
</script>
<style scoped lang="less"></style>

<template><div>聊天室</div><div class="msg-list" v-if="msgList"><div v-for="(item, index) in msgList" :key="index"><div><span>{{ item.user }}</span><span>{{ item.date }}</span></div><div>消息:{{ item.msg }}</div></div></div><div><input type="text" placeholder="请输入消息" v-model="msg" /><button @click="send">发送</button></div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const msgList = ref<any>([]);
const msg = ref();const send = () => {if (!msg.value.trim().length) return;msgList.value.push({id: new Date().getTime(),user: localStorage.getItem("_username"),date: new Date(),msg: msg.value,});};
</script>
<style scoped lang="less"></style>

2.封装websocket

const useWebSocket = (handleMessage: any) => {const ws = new WebSocket('ws://localhost:8000');const init = () => {bindEvent();};function bindEvent() {ws.addEventListener("open", handleOpen, false);ws.addEventListener("close", handleClose, false);ws.addEventListener("error", handleError, false);ws.addEventListener("message", handleMessage, false);}function handleOpen(e) {console.log("WebSocket open", e);}function handleClose(e) {console.log("WebSocket open", e);}function handleError(e) {console.log("WebSocket open", e);}init();return ws;
};export { useWebSocket };

3.后端(node)逻辑

先在根目录建一个server文件夹,在下面建一个index.js文件(node需要js文件才可以执行,别建ts文件),然后执行以下两条命令
在这里插入图片描述

npm init -yyarn add ws

index.js

console.log("测试websocket");
const WebSocket = require("ws");
((Ws) => {const server = new Ws.Server({ 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("webscoket  open");}function handleClose() {console.log("webscoket  close");}function handleError() {console.log("webscoket  error");}function handleConnection(ws) {console.log("webscoket connection");ws.on("message", handleMsg);}function handleMsg(msg) {console.log(JSON.parse(msg));server.clients.forEach((c) => {c.send(msg); //广播消息});}init();
})(WebSocket);

4.测试

在测试之前需启动后台
执行node index.js
还需调整聊天室页面的代码为:

<template><div>聊天室</div><div class="msg-list" v-if="msgList"><div v-for="(item, index) in msgList" :key="index"><div><span>{{ item.user }}</span><span>{{ item.date }}</span></div><div>消息:{{ item.msg }}</div></div></div><div><input type="text" placeholder="请输入消息" v-model="msg" /><button @click="send">发送</button></div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useWebSocket } from "@/hooks/index";
const msgList = ref<any>([]);
const msg = ref();// {
//   id: new Date().getTime(),
//   user:localStorage.getItem('_username'),
//   date:new Date().getTime(),
//   msg:'bbbbb'
// }
const handleMessage = (e) => {console.log(e);// const _msgData = JSON.parse(e.data);// console.log(_msgData);//因为从后台接收到的数据是blob类型的值,所以转换一下e.data.text().then((v) => {console.log(v);msgList.value.push(JSON.parse(v));});// msgList.value.push(_msgData);
};
const ws = useWebSocket(handleMessage);const send = () => {if (!msg.value.trim().length) return;//   msgList.value.push({//     id: new Date().getTime(),//     user: localStorage.getItem("_username"),//     date: new Date(),//     msg: msg.value,//   });ws.send(JSON.stringify({id: new Date().getTime(),user: localStorage.getItem("_username"),date: new Date(),msg: msg.value,}));
};
</script>
<style scoped lang="less"></style>

开启两个窗口就可以测试了,可以基于此代码优化各种细节

相关文章:

websocket+node+vite(vue)实现一个简单的聊天

1.前端逻辑 本项目基于之前搭建的vite环境&#xff1a;https://blog.csdn.net/beekim/article/details/128083106?spm1001.2014.3001.5501 新增一个登录页和聊天室页面 <template><div>登录页</div><div>用户名:<input type"text" pl…...

YApi和Swagger接口管理

这篇博客针对苍穹外卖而写 YApi 之前的官网&#xff1a;yapi.smart-xwork.cn 由于之前的网址访问不了&#xff0c;现在我用的是这个网址&#xff1a;YApi Pro-高效、易用、功能强大的可视化接口管理平台 登录之后如下 创建两个工作空间 用户端接口也是如法炮制 Swagger 使用…...

在不安全的集群上启用 Elasticsearch Xpack 安全性

本博文详细描述如何把一个没有启动安全的 Elasticsearch 集群升级为一个带有 HTTPS 访问的启用 Elasticsearch xpack 安全的集群。 为了增强 Elasticsearch 集群的安全性&#xff0c;你需要执行完全集群重启&#xff0c;并在客户端进行一些更改。 启用身份验证后&#xff0c;所…...

vue清除动态路由

项目中往往都是添加动态路由&#xff0c;如何删除已经添加进来的路由往往被忽视&#xff0c;为此这里做一下记录&#xff1a; 查看vue-router路由文档 可以看出 Vue2中是通过matcher来进行重新赋值来进行清空的。 let createRouter () > new Router({mode: history, //ha…...

rsyslog实现将日志存储到mysql中

​ 前提&#xff1a;准备好msql server或mariadb server&#xff1b; ​ 1、安装rsyslog连接至mysql server的驱动模块&#xff1b; [13:24 rootcentos6.8~]# yum install -y rsyslog-mysql [13:24 rootcentos6.8~]# rpm -ql rsyslog-mysql /lib64/rsyslog/ommysql.so /usr/…...

2015架构案例(五十一)

第5题 【说明】某信息技术公司计划开发一套在线投票系统&#xff0c;用于为市场调研、信息调查和销售反馈等业务提供服务。该系统计划通过大量宣传和奖品鼓励的方式快速积累用户&#xff0c;当用户规模扩大到一定程度时&#xff0c;开始联系相关企业提供信息服务&#xff0c;并…...

亚马逊测评安全吗?

测评可以说是卖家非常宝贵的财富&#xff0c;通过测评和广告相结合&#xff0c;可以快速有效的提升店铺的产品销量&#xff0c;提高转化&#xff0c;提升listing权重&#xff0c;但现在很多卖家找真人测评补单后店铺出现问题导致大家对测评的安全性感到担忧&#xff0c;因为真人…...

VS2022新建项目时没有ASP.NET Web应用程序 (.NET Framework)

问题&#xff1a;如图&#xff0c;VS2022新建项目时没有“ASP.NET Web应用程序 &#xff08;.NET Framework&#xff09;”的选项解决方法&#xff1a;点击跳转至修改安装选项界面选择安装该项即可&#xff1a;...

TIA博途软件中如何设置在程序中自动显示变量的注释信息?

TIA博途软件中如何设置在程序中自动显示变量的注释信息? 本例以TIA博途V15为例进行举例说明 如下图所示,新建一个项目后,打开PLC变量表,这里我选择几个变量进行举例说明,给这几个变量添加注释信息, 打开OB1,编写一句简单的程序,如下图所示,可以看到此时变量只显示名称…...

Hadoop3教程(一):Hadoop的定义、组成及全生态概览

文章目录 &#xff08;1&#xff09;定义1.1 发展历史1.2 三大发行版本1.3 Hadoop的优势1.4 Hadoop的组成 &#xff08;13&#xff09;HDFS概述&#xff08;14&#xff09;Yarn架构&#xff08;15&#xff09;MapReduce概述&#xff08;16&#xff09; HDFS、YARN、MapReduce三…...

成为数据分析师要具备什么能力——功法篇(上)

这篇文章适合做了一段时间数据分析工作&#xff0c;开始思考怎么继续提升自己的分析师、运营或者是实习了一段时间的同学&#xff0c;这时的你也许会想几个问题&#xff1a; 为什么我做出来的分析总觉得没有别人的那么高级&#xff1f; 老板为什么总说我的分析“太浅了”&#…...

【MySQL】Java的JDBC编程

目录 ♫什么是JDBC ♫JDBC常用接口和类 ♪Connection接口 ♪Statement对象 ♪ResultSet对象 ♫JDBC的使用 ♪添加“驱动包” ♪创建数据源&#xff0c;描述数据库服务器在哪 ♪和数据库服务器建立连接 ♪构建SQL语句 ♪执行SQL语句 ♪释放资源 ♫什么是JDBC 我们前面操…...

windows OpenCV(包含cuda)最简安装教程

windows OpenCV&#xff08;包含cuda&#xff09;最简安装教程 1. 在Windows下安装vcpkg vcpkg是一个开源的C包管理器&#xff0c;它能帮助我们轻松地安装和管理C库和工具。要在Windows上安装vcpkg&#xff0c;可以按照以下步骤进行&#xff1a; 克隆vcpkg仓库&#xff1a; 首…...

Vue3 + Nodejs 实战 ,文件上传项目--实现文件批量上传(显示实时上传进度)

目录 技术栈 1.后端接口实现 2.前端实现 2.1 实现静态结构 2.2 整合上传文件的数据 2.3 实现一键上传文件 2.4 取消上传 博客主页&#xff1a;専心_前端,javascript,mysql-CSDN博客 系列专栏&#xff1a;vue3nodejs 实战--文件上传 前端代码仓库&#xff1a;jiangjunjie…...

狂砸40亿美元,亚马逊向OpenAI竞争对手Anthropic投资

9 月 25 日下午&#xff0c;亚马逊在公司官网发布&#xff0c;向大模型公司 Anthropic 投资 40 亿美元&#xff0c; Anthropic以拥有对标 ChatGPT 的谈天机器人 Claude 而出名。 这项新的战略合作将结合双方在更安全的生成式AI领域的技术和专业知识&#xff0c;加速Anthropic未…...

目标检测YOLO实战应用案例100讲-基于YOLOv5_tiny算法的路面裂缝智能检测

目录 前言 国内外研究现状 公路路面裂缝检测方法现状 基于深度学习检测算法现状...

P5682 [CSP-J2019 江西] 次大值% 运算 set 去重的一道好题

#include <bits/stdc.h> using namespace std; int n, x, len, a[100010], ans; set<int> s; set<int>::iterator asd; int main() {/*a[n-1] 是最大的a[n-2] 可能是次大的a[n]%a[n-1]<a[n-1] 不可能是最大的&#xff0c;可能是次大的a[n-1]%a[n-2]<…...

vue3后台管理框架之API接口统一管理

在开发项目的时候,接口可能很多需要统一管理。在src目录下去创建api文件夹去统一管理项目的接口; 参数请参考mock中的模拟接口 //统一管理咱们项目用户相关的接口import request from @/utils/requestimport type { loginForm, loginResponseData, userInfoReponseData } fro…...

线性表的插入、删除和查询操作

线性表的插入、删除和查询操作 1、定义线性表 定义一个线性结构&#xff0c;有列表默认长度设置为50&#xff0c;列表数量 #include <stdio.h> #define MaxSize 50typedef int Element; typedef struct{Element data[MaxSize];int length; }SqList;2、顺序表插入 插入…...

基于深度学习网络的疲劳驾驶检测算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1疲劳检测理论概述 4.2 本课题说明 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 In_layer_Size [227 227 3]; img_size [224,…...

Ubuntu系统下交叉编译openssl

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

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

练习(含atoi的模拟实现,自定义类型等练习)

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...