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

Express 2019-01-04

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

效果图

项目结构

实现功能

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

下面将一一讲解如何实现

前期准备

、、

具体实现

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
请输入你的昵称 -->