express搭建的简单在线聊天室

项目分析

简单的在线聊天室：

1. 用户通过登录页面直接进入聊天室，参与文字性的交流。
2. 每当有新用户进入聊天室，系统需在聊天室中提示，新用户名不能与现有用户名重复。
3. 每当有用户从聊天室退出，系统需在聊天室中提示，退出的用户名自动回收，其他新用户可以使用。
4. 提示：采用WebSocket技术（可以采用socket.io库）和自定义事件及触发，后端采用Node.js（或基于Node.js的Web框架）。

技术：
这里我选择了原生JavaScript和node后端的express框架。
第三方包：
express，socketio

思路分析

1. 首先先把前端的静态页面写好，聊天肯定得有昵称对吧，然后我就写了个登录窗口，用来记录聊天的昵称。
2. 前端搞完搞后端，先把第三方这些东西准备好，引入socketio包。

const express = require('express')
const app = express()
var http = require('http').Server(app)
var io = require('socket.io')(http, { cors: true })

3. 突然想到两个页面之间发请求肯定有跨域问题，好家伙，后端设置头部。

app.all('*', function(req, res, next) {  
  res.header("Access-Control-Allow-Origin", "*");  
  res.header("Access-Control-Allow-Headers", "X-Requested-With");  
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");  
  res.header("X-Powered-By",' 3.2.1')  
  res.header("Content-Type", "application/json;charset=utf-8");  
  next();  
});  

4. 先跟着socketio官网的代码走一通，熟悉一遍。
5. 仔细想想，前端登录之后，就直接跳转到聊天页面，这时候肯定socketii已经建立起链接了，这时候先给后端一个监听事件，官网上有。
6. 前端在聊天页面点击发送消息，自定义一个消息先给后端emit一个消息过去。消息内容嘛就是要发送的信息和用户昵称。后端监听这个emit过来的消息，相当于已经拿到了用户发布的消息了，只需要把这个消息广播到所有客户端就可以了嘛。那后端收到消息后又emit到客户端去，客户端做个监听再接受这个消息再渲染上页面就差不多了。
7. 消息的传递倒是解决了，那这个用户昵称怎么在两个页面之间传递呢？我想了个办法，后端本来就会设计一个路由端口，用来返回聊天室页面。干脆我就在登录之后，fashion一个ajax请求后端的端口，然后后端拿到url上的username参数，就可以将username返回给客户端，这样的话每个客户端登录之后使用的昵称都是自己登陆时的昵称了。而且后端在拿到用户名之后还可以把这个用户名及时渲染到温馨提示信息上面。

像这样：

8. 既然用了原生的JavaScript，还是得自己封装一个ajax请求才行。

function ajax(url){
        return new Promise((resolve,reject)=>{
            let xhr = new XMLHttpRequest()
            xhr.open("GET",url)
            xhr.onreadystatechange = handler;
            xhr.responseType = 'json'
            xhr.setRequestHeader('Accept','application/json')
            xhr.send()
            function handler(){
                if(this.readyState!==4) return;
                if(this.status ===200){
                    resolve(this.response)
                    return
                }else{
                    reject(new Error("can't load this asset"))
                    return
                }
            }
        })
    }

我直接放项目链接了，欢迎大家来交流·~~
简单聊天室：https://github.com/fresh-students/onlinechat.git