开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> node.js + websocket实现一个简单的聊天室 -> 正文阅读

[JavaScript知识库]node.js + websocket实现一个简单的聊天室

一、websocket是什么？

WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

二、实现过程

1.前端界面显示部分

<!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"?name=""?id=""?/>

????<button>发送消息</button>

????<div?class="box2"></div>

????<script>

??????const?div?=?document.querySelector('div');

??????const?input?=?document.querySelector('input');

??????const?btn?=?document.querySelector('button');

??????const?socket?=?new?WebSocket('ws://localhost:8080');

??????const?ENTER_TYPE?=?0;

??????const?OUT_TYPE?=?1;

??????const?OTHER_TYPE?=?2;

??????//?open:当和websocket服务连接成功时的时候触发

??????socket.addEventListener('open',?function?()?{

????????div.innerHTML?=?'服务器连接成功';

??????});

??????//?点击按钮给服务器发送消息

??????btn.addEventListener('click',?()?=>?{

????????socket.send(input.value);

????????input.value?=?'';

??????});

??????//message：接受到websocketf服务返回的数据

??????socket.addEventListener('message',?(e)?=>?{

????????const?dv?=?document.createElement('div');

????????const?data?=?JSON.parse(e.data);

????????dv.innerText?=?data.userName;

????????if?(data.type?==?ENTER_TYPE)?{

??????????dv.style.color?=?'green';

????????}?else?if?(data.type?==?OUT_TYPE)?{

??????????dv.style.color?=?'red';

????????}?else?{

??????????dv.style.color?=?'';

????????}

????????div.appendChild(dv);

??????});

??????//?close:当和websocket服务关闭时的时候触发

??????socket.addEventListener('close',?()?=>?{

????????div.innerText?=?'服务器已关闭';

??????});

????</script>

??</body>

</html>

2. node.js实现部分

const?websocket?=?require('nodejs-websocket');

const?ENTER_TYPE?=?0;

const?OUT_TYPE?=?1;

const?OTHER_TYPE?=?2;

let?count?=?0;

//创建服务器

const?server?=?websocket.createServer((connect)?=>?{

??//每个用户进来就加一

??count++;

??//添加用户名

??connect.userName?=?`用户${count}`;

??//服务器连接时直接返回数据给浏览器显示：告诉所有人，有人进入聊天室

??broadcast({

????type:?ENTER_TYPE,

????userName:?`${

??????connect.userName

????}进入聊天室?----?${new?Date().toLocaleDateString()}`,

????time:?new?Date().toLocaleDateString()?//toLocaleDateString?转成当前本地时间

??});

??//接受到浏览器的发送过来的数据，处理后再返回给浏览器

??connect.on('text',?(data)?=>?{

????//接收到用户消息的时候，告诉所有用户，发送的消息内容是什么

????//?broadcast(data);

????broadcast({

??????type:?OUT_TYPE,

??????userName:?data,

??????time:?new?Date().toLocaleDateString()?//toLocaleDateString?转成当前本地时间

????});

??});

??//连接关闭时,直接返回数据给浏览器：告诉所有人，有人离开入聊天室

??connect.on('close',?(data)?=>?{

????count--;

????//?broadcast(`${connect.userName}已经离开聊天室`);

????broadcast({

??????type:?OTHER_TYPE,

??????userName:?`${

????????connect.userName

??????}已经离开聊天室----?${new?Date().toLocaleDateString()}`,

??????time:?new?Date().toLocaleDateString()

????});

??});

??//连接异常

??connect.on('error',?(data)?=>?{

????console.log('连接异常');

??});

});

//?广播，给所有的用户发消息

function?broadcast(msg)?{

??//server.connections?表示所有用户

??server.connections.forEach((element)?=>?{

????element.send(JSON.stringify(msg));

??});

}

server.listen(8080,?()?=>?{

??console.log('服务器启动完毕');

});

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2021-10-30 12:28:21 更:2021-10-30 12:30:57

360图书馆购物三丰科技阅读网日历万年历 2024年5日历

-2024/5/12 0:44:38-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码