Nodejs—即时通讯
第一步：新建文件夹chat并下载安装模块
1、npm init
2、cnpm install express --save
3、cnpm install express-session --save
4、cnpm install ejs --save
5、cnpm install socket.io --save
第二步：chat文件夹中新建public文件夹（公共js文件）、views（ejs文件）
- home.ejs（首页）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>登录</title>
</head>
<body>
<h1>登录</h1>
<form action="/check" method="get">
输入昵称：
<input type="text" id="nickName" name="nickName">
<input type="submit" value="点击进入">
</form>
</body>
</html>
- chat.ejs（聊天页面）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>聊天</title>
</head>
<body>
<h1>
欢迎：<span id="nickName"><%= nickName %></span>
</h1>
<ul class="talkList"></ul>
<input type="text" id="msg">
<input type="button" id="btn" value="发送">
<script src="/jquery-3.4.1.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
// 其他用户例如其他浏览器连接同一个地址，就能做到实时通讯，信息能够相互看到
const socket = io();
// 点击发送按钮提交数据
$('#btn').click(function () {
socket.emit('chat', {
'msg': $('#msg').val(),
'per': $('#nickName').html()
})
})
// 回车提交
$('#msg').keydown(function (e) {
if (e.keyCode == 13) {
// 提交input的内容
socket.emit('chat', {
'msg': $('#msg').val(),
'per': $('#nickName').html()
})
}
})
socket.on('back', (msg) => {
// 新数据放在前面
$('.talkList').prepend('<li>' + msg.per + ':' + msg.msg + '</li>')
// 发送之后input框清空
$('#msg').val('');
})
</script>
</body>
</html>
- index.js
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const io = require('socket.io').listen(server);
// session在整个会话周期都会存在，不是存储在本地的，服务器通过session的设置，可以甄别当前会话是那个用户在使用
const session = require('express-session');
app.use(session({
secret: 'keyboard cat', // session的id
resave: false, // 是否允许session重新设置
saveUninitialized: true // 是否允许session在储存容器中可以进行修改
}))
// 模版引擎设置
app.set('view engine', 'ejs');
// 加载静态资源
app.use(express.static('./public'));
// 设置显示首页
app.get('/', (req, res, next) => {
res.render('home');
})
// 用来保存所有用户的昵称
const allUse = [];
// 对昵称进行筛选和甄别
app.get('/check', (req, res, next) => {
// 获取从客户端表单提交的昵称
const nickName = req.query.nickName;
// 对昵称进行非空校验
if (!nickName) {
res.send('用户必须填写昵称');
return;
}
// 对昵称进行重复校验
if (allUse.indexOf(nickName) != -1) {
res.send('当前昵称已经重复');
return;
}
// 如果昵称审核通过，添加进allUse数组
allUse.push(nickName);
// 如果昵称审核通过，也把昵称保存在session中
req.session.nickName = nickName;
// 页面跳转到聊天页面
res.redirect('/chat');
})
// 显示聊天界面
app.get('/chat', (req, res, next) => {
res.render('chat', {
'nickName': req.session.nickName
})
})
// 给io绑定事件
io.on('connection', (socket) => {
socket.on('chat', (msg) => {
// 敏感词库校验 后端的事儿
io.emit('back', msg);
})
})
server.listen(8080);
效果：一个chrome一个safari浏览器模拟两个用户
