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 })
  1. 突然想到两个页面之间发请求肯定有跨域问题,好家伙,后端设置头部。
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();  
});  
  1. 先跟着socketio官网的代码走一通,熟悉一遍。
  2. 仔细想想,前端登录之后,就直接跳转到聊天页面,这时候肯定socketii已经建立起链接了,这时候先给后端一个监听事件,官网上有。
  3. 前端在聊天页面点击发送消息,自定义一个消息先给后端emit一个消息过去。消息内容嘛就是要发送的信息和用户昵称。后端监听这个emit过来的消息,相当于已经拿到了用户发布的消息了,只需要把这个消息广播到所有客户端就可以了嘛。那后端收到消息后又emit到客户端去,客户端做个监听再接受这个消息再渲染上页面就差不多了。
  4. 消息的传递倒是解决了,那这个用户昵称怎么在两个页面之间传递呢?我想了个办法,后端本来就会设计一个路由端口,用来返回聊天室页面。干脆我就在登录之后,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

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于使用VS Code搭建聊天室的具体实现步骤,可以按照以下方式进行操作: 1. 安装VS Code:首先,你需要在官网下载并安装VS Code。你可以根据你的操作系统选择相应的安装包,并按照默认设置进行安装。 2. 创建项目文件夹:在你的计算机上选择一个合适的位置,创建一个文件夹作为你的聊天室项目的根目录。 3. 初始化项目:打开VS Code,点击菜单栏中的“文件”选项,选择“打开文件夹”,然后选择你创建的项目文件夹。接下来,打开终端(可以使用快捷键Ctrl+`),在终端中输入以下命令来初始化项目: ```shell npm init -y ``` 这将创建一个package.json文件,用于管理你的项目依赖。 4. 安装必要的依赖:在终端中输入以下命令来安装一些必要的依赖: ```shell npm install express socket.io ``` 这将安装Express和Socket.IO模块,用于创建服务器和实现实时通信。 5. 创建服务器文件:在项目文件夹中创建一个名为server.js的文件,并在其中编写以下代码: ```javascript const express = require('express'); const app = express(); const http = require('http').createServer(app); const io = require('socket.io')(http); app.use(express.static('public')); io.on('connection', (socket) => { console.log('A user connected'); socket.on('chat message', (msg) => { console.log('Message: ' + msg); io.emit('chat message', msg); }); socket.on('disconnect', () => { console.log('A user disconnected'); }); }); http.listen(3000, () => { console.log('Server is running on http://localhost:3000'); }); ``` 6. 创建前端文件:在项目文件夹中创建一个名为public的文件夹,并在其中创建一个名为index.html的文件。在index.html中编写以下代码: ```html <!DOCTYPE html> <html> <head> <title>Chat Room</title> <style> body { margin: 0; padding: 20px; font-family: Arial, sans-serif; } #messages { margin-bottom: 10px; } input { margin-right: 10px; } </style> </head> <body> <div id="messages"></div> <form id="chat-form"> <input type="text" id="message-input" autocomplete="off"> <button type="submit">Send</button> </form> <script src="/socket.io/socket.io.js"></script> <script> const socket = io(); const messages = document.getElementById('messages'); const form = document.getElementById('chat-form'); const input = document.getElementById('message-input'); form.addEventListener('submit', (e) => { e.preventDefault(); if (input.value) { socket.emit('chat message', input.value); input.value = ''; } }); socket.on('chat message', (msg) => { const message = document.createElement('div'); message.textContent = msg; messages.appendChild(message); }); </script> </body> </html> ``` 7. 启动服务器:在终端中输入以下命令来启动服务器: ```shell node server.js ``` 现在,你的聊天室应该已经搭建完成了。你可以在浏览器中访问http://localhost:3000来查看聊天室界面,并与其他用户进行实时通信。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值