零基础实现node+express个性化聊天室的示例

发布时间：2020-12-16 08:17:10 所属栏目：百科来源：网络整理

导读：本篇文章使用node+express+jquery写一个个性化聊天室，一起来get一下~（源码地址见文章末尾）效果图项目结构实现功能登录检测系统自动提示用户状态（进入/离开）显示在线用户支持发送和接收消息自定义字体颜色支持发送表情支持发送图片下面将一一

本篇文章使用node+express+jquery写一个个性化聊天室，一起来get一下~（源码地址见文章末尾）

效果图

项目结构

实现功能

登录检测
系统自动提示用户状态（进入/离开）
显示在线用户
支持发送和接收消息
自定义字体颜色
支持发送表情
支持发送图片

下面将一一讲解如何实现

前期准备

、、

具体实现

1、将聊天室部署到服务器

先用node搭建一个服务器，部署在localhost:3000端口，先尝试向浏览器发送一个“hello world”，新建server.js文件。

app.get('/',function(req,res){ // 路由为localhost:3000时向客户端响应“hello world”
res.send('

Hello world

'); // 发送数据
});

http.listen(3000,function(){ // 监听3000端口
console.log('listening on *:3000');
});

打开浏览器输入网址：localhost:3000是这样的

一个node服务器搭建成功。

接下来用express向浏览器返回一个html页面

将server.js的代码改一下：

// 路由为/默认www静态文件夹
app.use('/',express.static(__dirname + '/www'));

express.static(__dirname + '/www');是将www文件夹托管为静态资源，意味着这个文件夹里的文件（html、css、js）彼此可以用相对路径。在www文件夹中添加index.html文件以及相应的css（相应css代码就不贴了，详情见源码），如下，该页面用了font-awesome小图标

chat

请输入你的昵称 -->