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

前端之家收集整理的这篇文章主要介绍了零基础实现node+express个性化聊天室的示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本篇文章使用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
请输入你的昵称 -->