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

日期：2020-05-11 栏目：程序人生浏览：次

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

效果图

项目结构

实现功能

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

下面将一一讲解如何实现

前期准备

node及npm环境、express、socket.io

具体实现

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

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

var app = require('express')(); // 引入express模块
var http = require('http').Server(app);

app.get('/', function(req, res){ // 路由为localhost:3000时向客户端响应“hello world”
 res.send('<h1>Hello world</h1>'); // 发送数据
});

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

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

一个node服务器搭建成功。

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

#安装express模块
npm install --save express

将server.js的代码改一下：

var express = require('express');
var app = express();
var http = require('http').Server(app); 

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

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

<!doctype html>
<html>
 <head>  
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>chat</title>
 <link rel="stylesheet" href="style/index.css" rel="external nofollow" >
 <link rel="stylesheet" href="style/font-awesome-4.7.0/css/font-awesome.min.css" rel="external nofollow" >
 </head>
 <body>
 <div class="all">
  <div class="name">
  <!-- <h2>请输入你的昵称</h2> -->
  <input type="text" id="name" placeholder="请输入昵称..." autocomplete="off"> 
  <button id="nameBtn">确 定</button>
  </div>
  <div class="main">
  <div class="header">
   <img src="image/logo.jpg">
   happy聊天室
  </div>
  <div id="container">
   <div class="conversation">
    <ul id="messages"></ul>
    <form action="">
     <div class="edit"> 
     <input type="color" id="color" value="#000000">
     <i title="双击取消选择" class="fa fa-smile-o" id="smile">
     </i><i title="双击取消选择" class="fa fa-picture-o" id="img"></i>
     <div class="selectBox"> 
      <div class="smile"> 
      </div>
      <div class="img"> 
      </div>
     </div>
     </div>
     <!-- autocomplete禁用自动完成功能 -->
     <textarea id="m"></textarea>
     <button class="btn rBtn" id="sub">发送</button>
     <button class="btn" id="clear">关闭</button>
    </form>
   </div>
   <div class="contacts">
   <h1>在线人员(<span id="num">0</span>)</h1>
   <ul id="users"></ul>
   <p>当前无人在线哟~</p>
   </div>
  </div>
  </div> 
 </div> 
 </body>
</html>

转载注明出处：http://www.heiqu.com/379.html

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

相关推荐