webSocket 聊天室 node.js 版

全局安装vue脚手架  npm install @vue/cli -g
创建 vue3 + ts 脚手架  vue create vue3-chatroom

后端代码

src 同级目录下建 server:

 

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);const io = require('socket.io')(server, { cors: true })io.on('connection', (socket) => {console.log('socket 已连接');socket.on('sendToServer', data => {console.log(`收到了前端发来的消息: ${data}`);io.emit("sendToClient", data);})socket.on('disconnect', () => {console.log('断开连接');});
});server.listen(3000, () => {console.log('listening on *:3000');
});

前端代码

核心代码:

import io from 'socket.io-client'var socket = io('ws://localhost:3000')socket.on("sendToClient", data => {console.log(`收到了后端发来的数据:${data}`);records.value.push(JSON.parse(data))
})const sendMessage = () => {if (!message.value.trim()) returnconst record: IRecord = reactive({message: message.value,nickname,userId: new Date().getTime() + '',color: '',sendTime: getYMDHMS(new Date().getTime())})socket.emit('sendToServer', JSON.stringify(record));message.value = '';
}

完整代码:

<template><div class="chat-room"><div class="nav"></div><div class="main"><div class="title"><span>图灵聊天室({{ userCount }})</span></div><div class="content" ref="recordsContent"><div v-for="(itm, inx) in records" :key="inx"><divclass="item":class="[itm.nickname === nickname ? 'item' : 'item-other']"><div class="info">[ {{ itm.nickname }}:{{ itm.sendTime }} ]</div><span class="message">{{ itm.message }}</span></div></div></div><div class="input-box"><div class="text"><textarea :rows="8" v-model="message" @keydown="onKeydown"></textarea></div><div class="opt"><button ghost @click="sendMessage">发 送</button></div></div></div></div>
</template><script setup lang="ts">
import io from 'socket.io-client'
import { reactive, ref } from 'vue'interface IRecord {nickname: string,userId: string,color: string,message: string,sendTime: string
}
const userCount = ref(2)
const records = ref<IRecord[]>([])
const message = ref('')
const nickname = localStorage.getItem('username') || '匿名用户'var socket = io('ws://localhost:3000')socket.on("sendToClient", data => {console.log(`收到了后端发来的数据:${data}`);records.value.push(JSON.parse(data))
})const sendMessage = () => {if (!message.value.trim()) returnconst record: IRecord = reactive({message: message.value,nickname,userId: new Date().getTime() + '',color: '',sendTime: getYMDHMS(new Date().getTime())})socket.emit('sendToServer', JSON.stringify(record));message.value = '';
}const onKeydown = (event: any) => {if (event.keyCode === 13) {sendMessage()}
}function getYMDHMS(timestamp:number) {let time = new Date(timestamp)let year = time.getFullYear()let month:any = time.getMonth() + 1let date:any = time.getDate()let hours:any = time.getHours()let minute:any = time.getMinutes()let second:any = time.getSeconds()if (month < 10) { month = '0' + month }if (date < 10) { date = '0' + date }if (hours < 10) { hours = '0' + hours }if (minute < 10) { minute = '0' + minute }if (second < 10) { second = '0' + second }return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
}</script><style scoped lang="scss">
.chat-room {margin: 0px auto;width: 100%;height: 100vh;display: flex;flex-direction: row;border: 1px solid #ccc;overflow: hidden;.nav {width: 66px;background: #363636;flex-shrink: 0;}.main {display: flex;background: #efefef;flex: 1;width: 0;display: flex;flex-direction: column;.title {height: 60px;display: flex;align-items: center;font-size: 16px;font-weight: 700;padding-left: 20px;border-bottom: 1px solid #c3c3c3;flex-shrink: 0;}.content {flex: 1;height: 0px;position: relative;overflow-y: auto;padding: 10px;.item {text-align: right;.info {font-size: 14px;color: #666;}.message {font-size: 18px;background-color: rgba(110, 89, 228, 0.579);margin: 10px;padding: 8px 12px;border-radius: 8px;display: inline-block;color: #333;}}.item-other {text-align: left;.message {background-color: rgb(218, 197, 112);}}}.input-box {height: 230px;border-top: 1px solid #c3c3c3;flex-shrink: 0;display: flex;flex-direction: column;.text {flex: 1;textarea {width: 94%;height: 160px;font-size: 16px;resize: none;border: none;padding: 8px 24px;background: #efefef;&:focus {outline: none;}&:focus-visible {outline: none;}}}.opt {height: 60px;flex-shrink: 0;display: flex;align-items: center;justify-content: flex-end;padding-right: 20px;}}}
}
</style>

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

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

相关文章

云原生反模式

通过了解这些反模式并遵循云原生最佳实践&#xff0c;您可以设计、构建和运营更加强大、可扩展和成本效益高的云原生应用程序。 1.单体架构&#xff1a;在云上运行一个大而紧密耦合的应用程序&#xff0c;妨碍了可扩展性和敏捷性。2.忽略成本优化&#xff1a;云服务可能昂贵&am…

大数据课程K2——Spark的RDD弹性分布式数据集

文章作者邮箱:yugongshiye@sina.cn 地址:广东惠州 ▲ 本章节目的 ⚪ 了解Spark的RDD结构; ⚪ 掌握Spark的RDD操作方法; ⚪ 掌握Spark的RDD常用变换方法、常用执行方法; 一、Spark最核心的数据结构——RDD弹性分布式数据集 1. 概述 初学Spark时,把RDD看…

easyx图形库基础:3实现弹球小游戏

实现弹球小游戏 一.实现弹球小游戏:1.初始化布&#xff1a;2.初始化一个球的信息&#xff1a;3.球的移动和碰撞反弹4.底边挡板的绘制和移动碰撞重置数据。 二.整体代码&#xff1a; 一.实现弹球小游戏: 1.初始化布&#xff1a; int main() {initgraph(800, 600);setorigin(40…

麻辣烫数据可视化,麻辣烫市场将持续蓬勃发展

麻辣烫&#xff0c;这道源自中国的美食&#xff0c;早已成为人们生活中不可或缺的一部分。它独特的香辣口味&#xff0c;让人忍不住每每流连忘返。与人们的关系&#xff0c;简直如同挚友一般。每当寒冷的冬日或疲惫的时刻&#xff0c;麻辣烫总是悄然走进人们的心房&#xff0c;…

FreeCAD的傻瓜式初级使用教程

起因&#xff1a;自己想DIY一套线性手刹和序列档&#xff0c;以便和我之前的freejoy控制器相连接应用&#xff0c;需要自己制图和在某宝找代加工的商家&#xff0c;但我又不想安装体积巨大的AutoCAD&#xff0c;所以找了以下开源、免费的解决方案&#xff0c;所以就有了这篇文章…

使用PostgreSQL构建强大的Web应用程序:最佳实践和建议

PostgreSQL是一个功能强大的开源关系型数据库,它拥有广泛的用户群和活跃的开发社区。越来越多的Web应用选择PostgreSQL作为数据库 backend。如何充分利用PostgreSQL的特性来构建健壮、高性能的Web应用?本文将给出一些最佳实践和建议。 一、选择合适的PostgreSQL数据类型 Pos…

C# WPF 中 外部图标引入iconfont,无法正常显示问题 【小白记录】

wpf iconfont 外部图标引入&#xff0c;无法正常显示问题。 1. 检查资源路径和引入格式是否正确2. 检查资源是否包含在程序集中 1. 检查资源路径和引入格式是否正确 正确的格式&#xff0c;注意字体文件 “xxxx.ttf” 应写为 “#xxxx” <TextBlock Text"&#xe7ae;…

类之间的比较

作者简介&#xff1a; zoro-1&#xff0c;目前大一&#xff0c;正在学习Java&#xff0c;数据结构等 作者主页&#xff1a; zoro-1的主页 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1f496;&#x1f496; 类之间的比较 固定需求式比较器 固定需求式 通过…

【C语言】字符分类函数、字符转换函数、内存函数

前言 之前我们用两篇文章介绍了strlen、strcpy、stract、strcmp、strncpy、strncat、strncmp、strstr、strtok、streeror这些函数 第一篇文章strlen、strcpy、stract 第二篇文章strcmp、strncpy、strncat、strncmp 第三篇文章strstr、strtok、streeror 今天我们就来学习字…

ES 概念

es 概念 Elasticsearch是分布式实时搜索、实时分析、实时存储引擎&#xff0c;简称&#xff08;ES&#xff09;成立于2012年&#xff0c;是一家来自荷兰的、开源的大数据搜索、分析服务提供商&#xff0c;为企业提供实时搜索、数据分析服务&#xff0c;支持PB级的大数据。 -- …

HTML详解连载(8)

HTML详解连载&#xff08;8&#xff09; 专栏链接 [link](http://t.csdn.cn/xF0H3)下面进行专栏介绍 开始喽浮动-产品区域布局场景 解决方法清除浮动方法一&#xff1a;额外标签发方法二&#xff1a;单伪元素法方法三&#xff1a;双伪元素法方法四&#xff1a;overflow浮动-总结…

GO学习之 数据库(mysql)

GO系列 1、GO学习之Hello World 2、GO学习之入门语法 3、GO学习之切片操作 4、GO学习之 Map 操作 5、GO学习之 结构体 操作 6、GO学习之 通道(Channel) 7、GO学习之 多线程(goroutine) 8、GO学习之 函数(Function) 9、GO学习之 接口(Interface) 10、GO学习之 网络通信(Net/Htt…

【C++】stack/queue/优先级队列的模拟实现

目录 1. stack/queue1.1 模拟实现 2. 优先级队列2.1 模拟实现2.2 仿函数 1. stack/queue stack文档说明 queue文档说明 stack和queue被称为容器适配器。 容器适配器是什么&#xff1f; 它是一种特殊的容器类型&#xff0c;通过封装已有的容器类型来提供特定功能的接口函数&a…

使用Nginx调用网关,然后网关调用其他微服务

问题前提&#xff1a;目前我的项目是已经搭建了网关根据访问路径路由到微服务&#xff0c;然后现在我使用了Nginx将静态资源都放在了Nginx中&#xff0c;然后我后端定义了一个接口访问一个html页面&#xff0c;但是html页面要用到静态资源&#xff0c;这个静态资源在我的后端是…

关于es中索引,倒排索引的理解

下面是我查询进行理解的东西 也就是说我们ES中的索引就相当于我们mysql中的数据库表&#xff0c;索引库就相当于我们的数据库&#xff0c;我们按照mapping规则会根据相应的字段&#xff08;index为true默认&#xff09;来创建倒排索引&#xff0c;这个倒排索引就相当于我们索引…

QT-Mysql数据库图形化接口

QT sql mysqloper.h qsqlrelationaltablemodelview.h /************************************************************************* 接口描述&#xff1a;Mysql数据库图形化接口 拟制&#xff1a; 接口版本&#xff1a;V1.0 时间&#xff1a;20230727 说明&#xff1a;支…

【ARM Linux 系统稳定性分析入门及渐进12 -- GDB内存查看命令 “x“(examine)】

文章目录 gdb 内存查看命令 examine 上篇文章&#xff1a;ARM Linux 系统稳定性分析入门及渐进11 – GDB( print 和 p 的使用| 和 &#xff1a;&#xff1a;的使用|ptype|{&#xff1c;type&#xff1e;} &#xff1c;addr&#xff1e; ) gdb 内存查看命令 examine examine是…

【数据结构】如何用队列实现栈?图文详解(LeetCode)

LeetCode链接&#xff1a;225. 用队列实现栈 - 力扣&#xff08;LeetCode&#xff09; 本文默认读者已经掌握栈与队列的基本知识 或者先看我的另一篇博客&#xff1a;【数据结构】栈与队列_字节连结的博客-CSDN博客 做题思路 由于我们使用的是C语言&#xff0c;不能直接使用队…

​Kubernetes的演变:从etcd到分布式SQL的过渡

DevRel领域专家Denis Magda表示&#xff0c;他偶然发现了一篇解释如何用PostgreSQL无缝替换etcd的文章。该文章指出&#xff0c;Kine项目作为外部etcd端点&#xff0c;可以将Kubernetes etcd请求转换为底层关系数据库的SQL查询。 受到这种方法的启发&#xff0c;Magda决定进一步…

react-native-webview RN和html双向通信

rn登录后得到的token需要传递给网页&#xff0c;js获取到的浏览器信息需要传递给rn RN Index.js: import React from react import { WebView } from react-native-webview import useList from ./useListexport default function Index(props) {const { uri, jsCode, webVie…