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

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

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

效果

项目结构

实现功能

@H_502_20@
  • 登录检测
  • 系统自动提示用户状态(进入/离开)
  • 显示在线用户
  • 支持发送和接收消息
  • 自定义字体颜色
  • 支持发送表情
  • 支持发送图片
  • 下面将一一讲解如何实现

    前期准备

    具体实现

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