个人网站制作 Part 25 添加实时聊天功能 | Web开发项目添加页面缓存

文章目录

  • 👩‍💻 基础Web开发练手项目系列:个人网站制作
    • 🚀 添加实时聊天功能
      • 🔨使用聊天服务
        • 🔧步骤 1: 选择聊天服务
        • 🔧步骤 2: 安装Socket.io
        • 🔧步骤 3: 创建Socket.io服务器
      • 🔨使用Vue.js
        • 🔧步骤 4: 创建聊天组件
        • 🔧步骤 5: 在页面中使用组件
    • 🚀 预览与保存
    • 🚀 下一步计划


👩‍💻 基础Web开发练手项目系列:个人网站制作

欢迎回到基础Web开发练手项目系列!

在前几篇博文中,我们已经创建了个人网站的基本结构、样式、导航栏、项目展示、联系信息、表单交互、动画效果、页面滚动效果、响应式设计、性能优化、页面动画、用户认证、数据库集成、电子邮件通知、社交媒体集成、博客功能、用户评论功能、用户权限管理、文件上传功能、搜索功能、网站分析工具、社交分享功能、订阅功能、网站地图、404错误处理、网站访问统计、在线聊天支持、支付功能、多语言支持、页面缓存、图形化数据展示和用户反馈功能。

在本篇中,我们将学习如何添加实时聊天功能,进一步提升用户体验。

在这里插入图片描述

🚀 添加实时聊天功能

🔨使用聊天服务

🔧步骤 1: 选择聊天服务

选择一个适合你项目的实时聊天服务。一些常用的选择包括Pusher、Socket.io和Firebase Realtime Database. 在这个示例中,我们将使用Socket.io。

🔧步骤 2: 安装Socket.io

在你的项目中安装Socket.io:

npm install socket.io --save
🔧步骤 3: 创建Socket.io服务器

在你的服务器端创建一个Socket.io服务器,监听聊天消息并广播给所有连接的客户端。

const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);io.on('connection', (socket) => {console.log('a user connected');socket.on('chat message', (msg) => {io.emit('chat message', msg);});socket.on('disconnect', () => {console.log('user disconnected');});
});http.listen(3000, () => {console.log('listening on *:3000');
});

确保根据你的项目需求配置服务器。

🔨使用Vue.js

🔧步骤 4: 创建聊天组件

在你的Vue.js项目中创建一个聊天组件,例如 Chat.vue

<template><div><ul id="messages"><li v-for="message in messages">{{ message }}</li></ul><input v-model="message" @keyup.enter="sendMessage" placeholder="Type your message"></div>
</template><script>
import io from 'socket.io-client';export default {data() {return {messages: [],message: '',};},created() {this.socket = io('http://localhost:3000');this.socket.on('chat message', (msg) => {this.messages.push(msg);});},methods: {sendMessage() {this.socket.emit('chat message', this.message);this.message = '';},},
};
</script>

确保根据你的项目需求配置Socket.io连接地址。

🔧步骤 5: 在页面中使用组件

在你的页面中引入并使用聊天组件:

<template><div><h2>实时聊天</h2><Chat /></div>
</template><script>
import Chat from './Chat.vue';export default {components: {Chat,},
};
</script>

🚀 预览与保存

确保保存所有文件并在浏览器中预览你的网站。现在,你的网站应该能够实现实时聊天功能了!

🚀 下一步计划

在下一篇文章中,我们将学习如何添加在线日历功能,提供更多实用性。记得继续关注本系列,为你的网站增添更多强大的功能!

通过这个项目,你已经学到了Web开发中许多重要的基础知识,并通过添加实时聊天功能进一步提升了用户体验。祝你编码愉快,不断提升技能!

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

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

相关文章

GStreamer 源码编译,在 Clion 下搭建调试环境

前言 最近在学习 GStreamer&#xff0c;官方提供了一些教程&#xff0c;本人希望能够断点调试&#xff0c;以便学习代码逻辑。本文记录如何在 Clion 搭建 GStreamer 源码编译、调试环境 步骤 下载源码 git clone https://gitlab.freedesktop.org/gstreamer/gstreamer.gitCl…

【漏洞复现】英飞达医学影像存档与通信系统 Upload.asmx 任意文件上传漏洞

0x01 产品简介 英飞达 医学影像存档与通信系统 Picture Archiving and Communication System&#xff0c;它是应用在医院影像科室的系统&#xff0c;主要的任务就是把日常产生的各种医学影像(包括核磁&#xff0c;CT&#xff0c;超声&#xff0c;各种X光机&#xff0c;各种红外…

适配不同数据库厂商方案

背景 在对国产化数据有要求的时候&#xff0c;我们会做对 达梦、海量等数据库的配置。 有些SQL 以前没有写成标准SQL&#xff1b; 那么适配的时候怎么办呢&#xff1f;改成标准SQL。 如果不好改呢&#xff1f;比如SQL比较复杂等&#xff0c;需要判断 当前是哪个厂商的数据库…

2024全球边缘计算大会参会企业名单(首批)

6月22日&#xff0c;第九届全球边缘计算大会将在深圳南山区科兴科学园举办&#xff0c;本次大会由边缘计算社区主办&#xff0c;并得到了EMQ、研华科技、网宿科技等单位的大力支持&#xff01;大会邀请了20重磅嘉宾&#xff0c;聚焦边缘计算前沿技术方向和热点趋势。 以下为首批…

HO-VMD-TCN:西储大学轴承故障诊断全流程详解

声明&#xff1a;文章是从本人公众号中复制而来&#xff0c;因此&#xff0c;想最新最快了解各类智能优化算法及其改进的朋友&#xff0c;可关注我的公众号&#xff1a;强盛机器学习&#xff0c;不定期会有很多免费代码分享~ 目录 原理详解 1.数据预处理 2.特征提取 3.故障…

DomoAI让你轻松变身视频达人!支持20s完整视频生成!

账号注册 官网&#xff1a;https://www.domoai.app/zh-Hant/library 功能 支持不同风格的视频类型&#xff0c;支持图片转视频&#xff0c;支持文字转图片&#xff0c;支持静态图片变为动态。 可以切换语言为中文 风格转换 选择不同风格的 支持生成20s&#xff0c;目前接触…

数据预处理 #数据挖掘 #python

数据分析中的预处理步骤是数据分析流程中的重要环节&#xff0c;它的目的是清洗、转换和整理原始数据&#xff0c;以便后续的分析能够准确、有效。预处理通常包括以下几个关键步骤&#xff1a; 数据收集&#xff1a;确定数据来源&#xff0c;可能是数据库、文件、API或网络抓取…

Zabbix Centos8 安装笔记

Zabbix 安装笔记 安装环境 Centos 8 正常发行版 安装版本 Zabbix 7 (LTS) 安装步骤 1、关闭防火墙 systemctl stop firewalld && systemctl disable firewalld && setenforce 0 && sed -i s/SELINUXenforcing/SELINUXdisabled/g /etc/selinux/c…

【C#】开发过程中记录问题

1.DateTimePicker控件获取时间 拖动控件&#xff0c;设置属性format为custom格式。例如我想获得20240101这种类型的string类型的数据&#xff1a; string DateTime DateTimePicker.Value.ToString("yyyyMMdd");2.ComboBox下拉列表控件 默认为DropDown&#xff0c;…

【Apache Doris】周FAQ集锦:第 6 期

【Apache Doris】周FAQ集锦&#xff1a;第 6 期 SQL问题数据操作问题运维常见问题其它问题关于社区 欢迎查阅本周的 Apache Doris 社区 FAQ 栏目&#xff01; 在这个栏目中&#xff0c;每周将筛选社区反馈的热门问题和话题&#xff0c;重点回答并进行深入探讨。旨在为广大用户和…

聚焦新版综合编程能力面试考查汇总

目录 一、业务性编程和广度能力考查 &#xff08;一&#xff09;基本定义 &#xff08;二&#xff09;必要性分析 二、高频考查样题&#xff08;编程扩展问法&#xff09; 考题1: 用java 代码实现一个死锁用例&#xff0c;说说怎么解决死锁问题&#xff1f;&#xff08;高…

大模型应用:LangChain-Golang核心模块使用

1.简介 LangChain是一个开源的框架&#xff0c;它提供了构建基于大模型的AI应用所需的模块和工具。它可以帮助开发者轻松地与大型语言模型(LLM)集成&#xff0c;实现文本生成、问答、翻译、对话等任务。LangChain的出现大大降低了AI应用开发的门槛&#xff0c;使得任何人都可以…

grep命令知多少

引言 1. grep命令的重要性 在Linux系统中&#xff0c;grep是一个不可或缺的文本处理工具&#xff0c;它允许用户快速搜索文件中的文本模式。这个命令的名称来源于Global Regular Expression Print&#xff0c;即全局正则表达式打印&#xff0c;它源自UNIX早期的ed文本编辑器。…

【MongoDB】如何在Debian 10 Linux上安装MongoDB

如何在Debian 10 Linux上安装MongoDB 来源:https://linuxize.com/post/how-to-install-mongodb-on-debian-10/ 文章目录 安装MongoDB配置MongoDB创建MongoDB管理员用户结论MongoDB是一个免费且开源的文档型数据库。它属于NoSQL数据库家族,与传统的基于表的SQL数据库(如MySQL…

青少年编程与数学 01-001开始使用计算机 02课题、计算机操作系统3_3

青少年编程与数学 01-001开始使用计算机 02课题、计算机操作系统3_3 四、Linux操作系统安装&#xff08;一&#xff09; 准备工作&#xff08;二&#xff09;设置BIOS/UEFI&#xff08;三&#xff09; 安装Linux&#xff08;四&#xff09;磁盘分区&#xff08;五&#xff09;安…

代码随想录算法训练营第三十九天 | 62.不同路径、63. 不同路径 II、343. 整数拆分、96.不同的二叉搜索树

62.不同路径 题目链接&#xff1a;https://leetcode.cn/problems/unique-paths/ 文档讲解&#xff1a;https://programmercarl.com/0062.%E4%B8%8D%E5%90%8C%E8%B7%AF%E5%BE… 视频讲解&#xff1a;https://www.bilibili.com/video/BV1ve4y1x7Eu/ 思路 确定dp数组以及下标的含…

FFmpeg YUV编码为H264

使用FFmpeg库把YUV420P文件编码为H264文件&#xff0c;FFmpeg版本为4.4.2-0。 需要yuv测试文件的&#xff0c;可以从我上传的MP4文件中用ffmpeg提取&#xff0c;命令如下&#xff1a; ffmpeg -i <输入MP4文件名> -pix_fmt yuv420p <输出YUV文件名>例如&#xff1…

2_2、MFC对话框应用

对话框应用 模态与非模态对话框模态对话框弹出模态对话框创建模态对话框 非模态对话框 属性页对话框向导对话框一般属性页对话框 消息对话框函数原型函数返回值调用 文件对话框字体对话框获取字体对话框中所选字体选取字体样式并显示在编辑框中 颜色对话框获取取颜色对话框中所…

word空白页删除不了怎么办?

上方菜单栏点击“视图”&#xff0c;下方点击“大纲视图”。找到文档分页符的位置。将光标放在要删除的分节符前&#xff0c;按下键盘上的“Delet”键删除分页符。

L52--- 144. 二叉树的后序遍历(深搜)---Java版

1.题目描述 2.思路 (1)二叉树后序遍历&#xff1a;左右根 (2)根节点的压入: 根节点首先被压入stack中&#xff0c;然后被弹出并压入output中。 遍历过程: stack用于存储需要遍历的节点。 output用于反转遍历顺序。 入栈顺序: 左子节点先入栈&#xff0c;右子节点后入栈。这…