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>

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/160468.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

React create-react-app 里配置代理(解决跨域)

配置代理&#xff1a; creact-react-app v5 当然不是v5 下面的方法也适用。 方式一&#xff1a;package.json里配置 其实 cra里给了个简单的配置代理 就是在package.json里加上proxy就行了。 修改时需要 npm start重新运行一下&#xff0c;要不然可能不生效。 proxy只能以 h…

Leetcode学习记录(1)

1.unordered_map C关联容器&#xff0c;内部hash表结构&#xff08;检索&#xff09; 通过key来检索value&#xff0c;不是通过绝对地址&#xff0c;内部无序&#xff0c;Map对应唯一值&#xff0c;动态管理 unordered_map<const Key, T> map; 如上述代码表述&#x…

主机jvisualvm连接到tomcat服务器查看jvm状态

​使用JMX方式连接到tomcat&#xff0c;连接后能够查看前边的部分内容&#xff0c;但是不能查看Visual GC&#xff0c;显示不受此JVM支持&#xff0c; 对了&#xff0c;要显示Visual GC&#xff0c;首先要安装visualvm工具&#xff0c;具体安装方式就是根据自己的jdk版本下载…

第二证券:10家央企集体行动!9月至今逾百家公司回购增持

10月16日&#xff0c;10家央企连续公告&#xff0c;掀起了新一轮回购增持潮。其间&#xff0c;5家上市公司发布新增增持方案&#xff0c;约5亿&#xff5e;16.3亿元&#xff1b;2家上市公司发布增持打开&#xff0c;估计约23.43亿元&#xff1b;1家上市公司新增回购方案&#x…

服务器数据恢复-RAID5常见故障的数据恢复方案

raid5阵列常见故障&#xff1a; 1、服务器硬件故障或者RAID阵列卡故障&#xff1b; 2、服务器意外断电导致的磁盘阵列故障&#xff1b; 3、服务器RAID阵列阵列磁盘出现物理故障&#xff0c;如&#xff1a;电路板坏、磁头损坏、盘面划伤、坏扇区、固件坏等&#xff1b; 4、误操作…

25项,2023年国家优青(港澳)入选者完整名单公布!

国家优秀青年科学基金项目&#xff08;港澳&#xff09;旨在支持香港特别行政区、澳门特别行政区&#xff08;以下简称港澳特区&#xff09;科技创新发展&#xff0c;鼓励爱国爱港爱澳高素质科技人才参与中央财政科技计划&#xff0c;为建设科技强国贡献力量&#xff0c;2023 年…

MyBatisPlus(十九)自动填充

说明 自动填充指的是&#xff0c;当数据被 插入 或者 更新 的时候&#xff0c;会为指定字段进行一些默认的数据填充。 比如&#xff0c;插入时&#xff0c;会自动填充数据的创建时间和更新时间&#xff1b;更新时&#xff0c;会自动填充数据的更新时间。 实现方式 配置处理器…

Centos中如何删除带有特殊符号的乱码文件_rz命令产生的乱码文件如何删除_使用文件号删除乱码文件---Linux运维工作笔记058

在使用rz命令进行文件上传的时候,偶尔会产生一堆的乱码文件,比如: 可以看到有一堆的乱码文件. 普通的乱码文件,直接rm -rf 文件名就可以删除了,但是有一些不行,包含特殊符号的,比如: 这个文件报错了,可以看到用rm -rf 根本删除不掉. 这个文件后面包含了一个.对吧 那该怎么解决…

python基于django的留学生服务管理平台

留学服务管理平台的用户是系统最根本使用者&#xff0c;按需要分析系统包括三类用户&#xff1a;学生、教师、管理员。这三类用户对系统的需求简要如下。技术栈 后端&#xff1a;pythondjango 前端&#xff1a;vueCSSJavaScriptjQueryelementui 开发语言&#xff1a;Python 框架…

69. x 的平方根

69. x 的平方根 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;参考代码&#xff1a;1. log换底2. 二分查找3. 牛顿迭代法 原题链接&#xff1a; 69. x 的平方根 https://leetcode.cn/problems/sqrtx/description/ 完成情况&#xff1a; 解题思路&#xff…

2023年中国乳胶制品产量、需求量及市场规模分析[图]

乳胶泛指聚合物微粒分散于水中形成的胶体乳液&#xff0c;又称胶乳。习惯上将橡胶微粒的水分散体称为胶乳&#xff0c;而将树脂微粒的水分散体称为乳液。以乳胶为原料制成的制品称乳胶制品&#xff0c;常见的如海绵、手套、玩具、胶管等。 我国乳胶制品细分主要分为避孕套、乳胶…

idea不识别yaml文件导致,配置文件点击跳转不了类

文章目录 场景确认的idea安装了ymal插件,确认你的配置文件是yml格式的还是ymal格式的然后在项目配置中看看是否有对应的后缀.最后看看在项目模块里面有没有spring模块跟对应的配置文件,如果没有就要添加这样点击配置文件就能跳转到对应的实体类了 场景 在使用idea时&#xff0…

网络社区挖掘-图论部分的基本知识笔记

1 网络社区挖掘定义 网络社区挖掘是指利用数据挖掘技术和机器学习算法&#xff0c;分析社交网络、在线社区或互联网上的各种交互数据&#xff0c;以揭示其中隐藏的模式、关系和信息。这些社区可以是社交媒体平台、在线论坛、博客、微博等&#xff0c;人们在这些平台上进行交流…

智慧公厕:打破传统,解决城市痛点@中期科技

近年来&#xff0c;随着城市化进程的加速推进&#xff0c;智慧公厕成为人民生活质量提升的重要组成部分。作为一个富有创新和科技感的解决方案&#xff0c;智慧公厕不仅满足了人们对公共环境的要求&#xff0c;还提供了一系列便利的服务&#xff0c;让人们的生活更加舒适、便捷…

【vr】【unity】白马VR课堂系列-VR开发核心基础05-主体设置-手柄对象的引入和设置

【视频教学】 【白马VR课堂系列-VR开发核心基础05-主体设置-手柄对象的引入和设置】 https://www.bilibili.com/video/BV19D4y1N73i/?share_source=copy_web&vd_source=7f5c96f5a58b7542fc6b467a9824b04e 【内容】 上一节引入了XR Origin并进行了初步设置,运行测试时V…

短视频剪辑矩阵系统开发解决的市场工具难点?

短视频剪辑矩阵系统开发源码----源头搭建 一、源码技术构建源码部署搭建交付之---- 1.需要协助系统完成部署、接口全部正常接入、系统正常运行多久&#xff1f;7个工作日 2.需要准备好服务器以及备案域名 3.短视频SEO模块一年项目带宽&#xff0c;带宽最低要求10M&#xff0c;…

实验笔记之——可见光通信调制驱动芯片模组

本博文记录本团队研发出的VLC驱动调制芯片模组&#xff08;如下图所示&#xff09;的驱动调制代码烧录过程。 实物模组正面 实物模组反面 首先需要安装keil5&#xff0c;其安装与编译过程请参考博客&#xff1a;实验笔记之——单片机烧录的实验过程_烧录程序的基本步骤-CSDN博客…

Python 函数用法和底层分析

目录 1 函数简介1.1 函数的基本概念1.2 Python函数的分类 2 函数的定义和调用2.1 核心要点2.2 形参和实参2.3 文档字符串(函数的注释)2.4 返回值 3 函数也是对象&#xff0c;内存底层分析4 变量的作用域(全局变量和局部变量)5 局部变量和全局变量效率测试6 参数的传递6.1 传递可…

数据库:Hive转Presto(五)

此篇将所有代码都补充完了&#xff0c;之前发现有的代码写错了&#xff0c;以这篇为准&#xff0c;以下为完整代码&#xff0c;如果发现我有什么考虑不周的地方&#xff0c;可以评论提建议&#xff0c;感谢。代码是想哪写哪&#xff0c;可能比较繁琐&#xff0c;还需要优化。 …

如何打造智能公厕:实现智慧监测、自动化运营和智慧化管理

在现代城市里&#xff0c;公共厕所是人们不可或缺的基础设施之一。然而&#xff0c;传统的公厕管理方式已经无法满足人们对公厕的期望&#xff0c;因此需要采用智慧公厕管理系统来提升公厕服务的质量。本文将以智慧公厕领先厂家广州中期科技有限公司&#xff0c;大量精品案例现…