1.框架图
文件结构
2.具体实现
2.1 client
- 创建一个client文件夹里面创建两个目录表示两个页面一个login页面，一个list展示消息页面；然后创建一个js文件里面再新建两个js文件来对两个页面进行dom操作和逻辑处理；
- 初始化package并引入vite
yarn init -y
yarn add vite
- 静态页面代码:(没有任何的样式，主打实现基础逻辑)
// login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" placeholder="请输入用户名" id="input">
<button id="enter">进入聊天室</button>
<script src="./js/entry.js"></script>
</body>
</html>
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="list"></ul>
<input type="text" id="message" placeholder="请输入消息">
<button>发送消息</button>
<script src="./js/index.js"></script>
</body>
</html>
- 登录页的js逻辑
- 获取dom元素 input 和 button
- 判断用户是否输入了username并校验
- 用户点击了按钮之后将数据存储到本地
;((doc, storage, location) => {
// 1. 获取元素
const inputEl = doc.querySelector('#input');
const btnEl = doc.querySelector('#enter');
// 2. 初始化
const init = () => {
bindEvent();
}
// 3. 绑定事件监听
function bindEvent() {
btnEl.addEventListener('click', bandHandler, false);
}
// 4. 编写按钮点击之后的业务逻辑
function bandHandler() {
// 获取dom元素 input的值
const username = inputEl.trim().value;
// 校验长度
if(username.length < 3) {
alert('用户名长度不能小于3');
return;
}
storage.setItem('UserNm', username);
location.href = 'index.html';
}
init();
})(document, localStorage, location)
测试数据是否存储到了storage里面
完美，数据不光存储了，还实现了页面的跳转
4. 首页的逻辑
- 获取所有的dom元素 ul input button
- 创建一个webSocket实例并指定端口号
- 将实例的open，close，error，message，send方法绑定监听事件
- 收集用户输入的聊天信息并进行校验，然后使用send方法将消息发送给server
- server接收到了数据之后通过遍历所有的客户端，然后以广播的形式将消息发送出来
- client在message方法里面接收到之后创建li节点写入返回的消息，然后追加到ul里面展示即可
;((doc, storage) => {
const inputEl = doc.querySelector('#message');
const ulEl = doc.querySelector('#list');
const btnEl = doc.querySelector('button');
const ws = new WebSocket('ws:localhost: 8000');
let username = '';
const init = () => {
bindEvent();
}
function bindEvent() {
btnEl.addEventListener('click', btnHandler, false);
wx.addEventListener('open', openHandler, false);
wx.addEventListener('close', closeHandler, false);
wx.addEventListener('error', errorHandler, false);
wx.addEventListener('send', sendHandler,false);
wx.addEventListener('message', messageHandler, false);
}
// 点击按钮收集表单数据
function btnHandler() {
// 获取表单数据
const msg = inputEl.value;
// 校验是否输入消息
if(!msg.trim().length) {
alert('内容不能为空');
return;
}
// 调用实例发送信息
ws.send(JSON.stringify(
{
username,
time: Date.now().getTime(),
msg
}
))
// 将表单清空
inputEl.value = '';
}
// 会话打开之前判断是否登录
function openHandler() {
username = storage.getItem('userNm');
// 如果没有用户姓名就返回到登录页
if(!username){
location.href = 'login.html';
return;
}
}
init();
})(document, localStorage)
2.2 server
- 初始化package文件并且下载ws和nodemon，创建一个index.js文件来编写服务端的代码逻辑
yarn init -y
yarn add ws
- 业务逻辑
1.实例化一个server并配置端口号
2.给server创建监听事件 open close error connnection
// index.js
const ws = require('ws');
;((ws) => {
const server = new ws.Server({port: '8000'});
const init = () => {
bindEvent();
}
function bindEvent() {
server.on('open', openHandler, false);
server.on('close', closeHandler, false);
server.on('error', errorHandler, false);
server.on('connection', connectionHandler, false);
}
function connection(ws) {
ws.on('message', messageHandler, false);
console.log('websocket connection');
}
init();
})(ws)
使用nodemon启动文件监听之后你就能看到连接成功
然后再添加监听前端发送消息的事件
function messageHandler(msg) {
console.log(msg);
}
在首页的输入框里面发送需要发出的消息，然后就可以在server控制台看到传递过来的消息
接着server收到消息之后遍历所有客户端，将消息广播出去
function meassageHandler(msg) {
ws.clients.forEach((c) => {
c.send((msg.toString()))
})
}
最后来到client中接收广播的消息，然后创建li将内容写入到里面，然后追加到ul里面展示即可
function messageHandler(e) {
// 可以再次测试发送消息，然后再浏览器的控制台里面可以看到广播的消息
console.log(JSON.parse(e.data));
// ul追加元素
const {user, time, message} = e.data;
ulEl.appendChild(createLi(JSON.parse(e.data)));
}
function createLi(params) {
const {user, time, message} = params;
// 先创建li元素
const perLiItem = document.createElment('li');
// 往元素里面写入内容
perLiItem.innerHTML = `
<p>
<span>${user}</span>
<span>${new Date(time)}</span>
</p>
<p>
消息：${message}
</p>
`
}
我们可以开两个浏览器测试是否是广播，是否都可以发送消息并且收到消息进行展示，完美，基础版实现
3. 所有源码
// login -> login.js
// 立即执行函数
// 最外面的括号表示要传入的参数 局部作用域
;((doc, storage, location) => {
/*
1. 获取输入框和按钮
2. 收集表单输入的内容判断长度是否>6，不是alert，是存储到storage中
3. 调用loacation进行页面跳转
*/
const inputEl = doc.querySelector('#input');
const btnEl = doc.querySelector('#enter');
// 初始化init函数
const init = () => {
bindEvent();
}
// 给按钮绑定一个监听事件
function bindEvent() {
btnEl.addEventListener('click', btnHandler, false);
}
// 抽离出来按钮的回掉函数
function btnHandler() {
const username = inputEl.value.trim();
if(username.length < 3) {
alert('长度必须为3');
return;
}
storage.setItem('UserNm', username);
// 进行页面的跳转
location.href = 'index.html'
}
init();
})(document, localStorage, location);
// login -> index.js
;((doc, WebSocket, storage) => {
/*
1. 获取列表 输入框 按钮元素对象
2. 给按钮绑定一个点击事件，将函数抽离到外面，同时创建ws的监听事件
*/
const inputEl = doc.querySelector('#message');
const listEl = doc.querySelector('#list');
const btnEl = doc.querySelector('button');
const ws = new WebSocket('ws:localhost:8000'); // 指定ws的端口号
// 定义一个用户名变量
let username = '';
const init = () => {
bindEvent();
}
function bindEvent() {
btnEl.addEventListener('click', handlerBtn, false);
ws.addEventListener('open', openHandler, false);
ws.addEventListener('close', closeHandler, false);
ws.addEventListener('error', errorHandler, false);
ws.addEventListener('message', messageHandler, false);
}
function handlerBtn() {
const msg = inputEl.value;
// 判断是否输入了内容
if(!msg.trim().length) return;
// 获取input框里面的值 发送
// console.log('send message');
// 使用ws发送，必须转为字符串格式
ws.send(JSON.stringify(
{
user: username,
time: new Date().getTime(),
message: msg
}
))
// 发送完之后清空数据
inputEl.value = ''
}
function openHandler(e) {
// 在open打开了之后判断
username = storage.getItem('UserNm');
// 判断username是否存在 发送消息必须有username
if(!username) {
location.href = 'entry.html'
return;
}
}
function closeHandler() {
console.log('websoket close');
}
function errorHandler() {
console.log('websoket error');
}
function messageHandler(e) {
console.log(JSON.parse(e.data));
// console.log('websoket message');
// 追加子dom节点
listEl.appendChild(createEl(JSON.parse(e.data)))
}
function createEl(params) {
const {user, time, message} = params;
// 创建lidom节点 先创建节点 接着给节点写入数据 然后追加节点到夫节点中
const liItem = doc.createElement('li');
liItem.innerHTML = `
<p>
<sapn>${user}-</span>
<em>${new Date(time)} </em>
</p>
<p>
消息： ${message}
</p>
`
return liItem;
}
init()
})(document, WebSocket, localStorage)
// server -> index.js
/*
1. 引入ws 通过ws.server创建一个port
2. 创建一个函数里面包括所有的ws的事件处理函数 open close error connection(message)
*/
const ws = require('ws')
;((ws) => {
const server = new ws.Server({port : 8000});
const init = () => {
bindEvent()
}
function bindEvent() {
server.on('open', openHandler, false);
server.on('close', closeHandler, false);
server.on('error', errorHandler, false);
server.on('connection', connectionHandler, false);
}
function openHandler() {
console.log('websoket open');
}
function closeHandler() {
console.log('websoket close');
}
function errorHandler() {
console.log('websoket error');
}
function connectionHandler(ws) {
ws.on('message', messageHandler, false);
console.log('websoket connection');
}
function messageHandler(msg) {
console.log(msg.toString());
// console.log('收到的消息：', JSON.parse(msg));
// 通过server.clients方法遍历所有的客户端，然后调用send方法就可以将消息广播出去，任何人都可以接收到
// 然和可以到前端的message事件处理函数里面通过data接收到广播的消息
server.clients.forEach((c) => {
c.send((msg.toString()))
})
}
init();
})(ws)
4. 总结
记录一下自己的学习过程，如果有不正确的地方欢迎进行纠正，谢谢大家…
8170
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
