NodeJS实现一个聊天室功能


Posted in NodeJs onNovember 25, 2019

看效果

一直说我喜欢卖关子,这次直接看效果:

NodeJS实现一个聊天室功能

聊天界面(喜欢的可以自己画一个比较逼真的页面)

NodeJS实现一个聊天室功能

前文

先说一下为什么写这个东西,最近不是在写NodeJS知识点的梳理嘛,但是我发现梳理的过程着实无聊的要死,虽然已经快梳理一半了,只是还没发布,这个不重要,重要的是不做点什么东西确实无聊,所以今天把我做这个的过程记录给你们看一下,喜欢的可以拿去玩玩。实现的功能是可以聊天,可以显示用户自定义的昵称,并且显示发送时间

PS:这个功能如果我们使用webstorm新建一个express app的项目的话,是可以省很多代码的,但是这里我们选择原生实现它,原因是我们写代码不可能一直依赖于别人搭建好的框架或者轮子,虽然我们提倡不重复造轮子,但是如果每一个程序员都这样想的话,这个行业面临的将是一个轮子都没有。

客户端代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>http_demo</title>
  <script src="/socket.io/socket.io.js"></script>
</head>
<body>
  <h1>
    WelCome to CSDN of clearlove
  </h1>
  <p>
    If you like my article, you can follow my blog
  </p>
  <p>公屏聊天</p>
  <div id="infos">
  </div>
  <input style="margin-top: 5vh;
  width: 100px;
  height: 40px;
  border: 1px solid #ffffff;
  border-radius: 4px;
  color: #000000;
  padding-left: 10px" type="text" id="nick" value="" placeholder="昵称" />
  <input type="text" id="send_info" value="" placeholder="请输入您想说的话" />
  <button type="button" id="btn">发送</button>
</body>
<script>
  //创建一个io对象
  var socket = io();
  //用户点击发送的时候直接将昵称和信息内容发送过去,如果没有昵称,显示匿名,判断是不是有值
  document.getElementById("btn").onclick = function () {
    if(document.getElementById("send_info").value){
      socket.emit("link_to_server", document.getElementById("send_info").value, document.getElementById("nick").value ? document.getElementById("nick").value : '匿名')
    }else{
      alert(`发送内容不可以为空`)
    }
  }
  // 收到的信息展示出来,新建一个元素,append到div中
  socket.on('link_to_client', function (msg) {
    var h6 = document.createElement('h6');
    h6.innerText = `${msg}`;
    document.getElementById('infos').append(h6)
  })
</script>
<style>
  body {
    background: #307ac6;
    text-align: center;
    color: aliceblue;
    margin: 0% 10%
  }
  p {
    font-size: 2rem
  }
  input {
    margin-top: 5vh;
    width: 200px;
    height: 40px;
    border: 1px solid #ffffff;
    border-radius: 4px;
    color: #000000;
    padding-left: 10px;
  }
  button {
    border: none;
    background: #ffffff;
    border-radius: 4px;
    width: 90px;
    height: 42px;
    color: #000000;
  }
  #infos {
    margin-left: 25vw;
    width: 400px;
    height: 500px;
    overflow: scroll;
    border: none;
    background: #ffffff;
    color: #000000;
  }
</style>
</html>

服务端代码

/**
 * @author clearlove
 * @aim 测试连接一个socket.io通信 广播
 */
//引入fs
var fs = require('fs')
//引入http 
var http = require('http')
var date = new Date()
/**
 * @FormDate 格式化时间
 * @param {*} date 当前时间
 */
function FormDate(date) {
  return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`
}
/**
 * 搭建一个服务器
 */
var server = http.createServer(function (res, res) {
  if (res.url !== '/favicon.ico') {
    res.writeHead(200, { "Content-type": "text/html" })
    const myreadstream = fs.createReadStream(__dirname + '/views/http_demo.html', 'utf-8')
    myreadstream.pipe(res)
  }
})
//引入socket.io 这里是两步,第一步是io = require('socket.io') 第二步是一个新的变量.server 合成一步就是下面的代码
var io = require('socket.io')(server);
io.on("connection", function (socket) {
  //这里获取到对方的ip地址,可以展示,也可以不展示,也可以进行ip的过滤
  var clientIp = socket.request.connection.remoteAddress
  console.info("一个socket连接成功了")
  socket.on("link_to_server", function (msg, nick) {
    //这里使用io发送 
    io.emit('link_to_client', `${nick} : ${msg} ${FormDate(date)}`)
  })
})
server.listen(5000, '0.0.0.0');
console.info("server is running...")

服务跑起来

隐藏一下ip吧,为了安全

NodeJS实现一个聊天室功能

当然上面我用的一些可能比较‘原生',直接创建元素什么的,我是因为没有引入类似jquery这样的框架进来,引入的话就比较简单的,但是不影响我们实现这个基础的聊天功能,上面可能有一些你们不明白的地方或者是你们都明白,包括为什么上面启动的时候不是node+文件名字而是nodemon+文件名,有什么区别,有什么好处,都没关系,后面的文章我都会介绍上面用到的所有的知识点,具体怎么使用的,怎么出来的, 为什么这么写,怎么一步一步实现目前的这个效果,后面的文章我都会更新,为什么这个时候写这个呢?原因是我想让更多的人知道NodeJS本身是一个很好玩的语言,可以做的事情很多。如果你们看了我的文章以后喜欢上了NodeJS我的目的就达到了,毕竟我还是觉得NodeJS是一个非常强大的语言,我希望更多的人使用它。

如果有人觉得不想看那么多就想玩玩这个效果的,也可以,直接安装node、然后本地初始化一个package.json,然后安装nodemon、socket.io就可以了,具体怎么安装,emmmmm

安装node

下载node

下一步下一步就好了

初始化package.js

npm init

输入名字 版本号之后 一直回车就好了

安装nodemon

npm install -g nodemon --save-dev

安装socket.io

npm install socket.io --save-dev

总结

以上所述是小编给大家介绍的NodeJS实现一个聊天室功能,点击跳转按钮实现跳转,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

NodeJs 相关文章推荐
nodejs入门详解(多篇文章结合)
Mar 07 NodeJs
NodeJS url验证(url-valid)的使用方法
Nov 18 NodeJs
Nodejs学习笔记之NET模块
Jan 13 NodeJs
Nodejs Stream 数据流使用手册
Apr 17 NodeJs
nodejs基础应用
Feb 03 NodeJs
nodejs获取微信小程序带参数二维码实现代码
Apr 12 NodeJs
NodeJS自定义模块写法(详解)
Jun 27 NodeJs
nodejs模块学习之connect解析
Jul 05 NodeJs
详解NODEJS基于FFMPEG视频推流测试
Nov 17 NodeJs
Nodejs异步回调之异常处理实例分析
Jun 22 NodeJs
基于Nodejs的Tcp封包和解包的理解
Sep 19 NodeJs
使用nodejs分离html文件里的js和css详解
Apr 12 NodeJs
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
Nov 18 #NodeJs
NodeJs crypto加密制作token的实现代码
Nov 15 #NodeJs
Nodejs技巧之Exceljs表格操作用法示例
Nov 06 #NodeJs
NodeJS http模块用法示例【创建web服务器/客户端】
Nov 05 #NodeJs
nodejs实现UDP组播示例方法
Nov 04 #NodeJs
nodejs dgram模块广播+组播的实现示例
Nov 04 #NodeJs
Nodejs实现图片上传、压缩预览、定时删除功能
Oct 25 #NodeJs
You might like
php中设置多级目录session的问题
2011/08/08 PHP
php中经典方法实现判断多维数组是否为空
2011/10/23 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
python中的对象拷贝示例 python引用传递
2014/01/23 Python
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
对python3 中方法各种参数和返回值详解
2018/12/15 Python
在Python中使用Neo4j的方法
2019/03/14 Python
Python玩转PDF的各种骚操作
2019/05/06 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
python模拟实现斗地主发牌
2020/01/07 Python
python实现处理mysql结果输出方式
2020/04/09 Python
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
国庆宣传标语
2014/06/30 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
小学德育工作总结2015
2015/05/12 职场文书
2016中考冲刺决心书
2015/09/22 职场文书