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的require模块(文件模块/核心模块)及路径介绍
Jan 14 NodeJs
抛弃Nginx使用nodejs做反向代理服务器
Jul 17 NodeJs
NodeJS连接MongoDB数据库时报错的快速解决方法
May 13 NodeJs
NodeJS中的MongoDB快速入门详细教程
Nov 11 NodeJs
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
Jan 12 NodeJs
NodeJS配置HTTPS服务实例分享
Feb 19 NodeJs
nodejs入门教程二:创建一个简单应用示例
Apr 24 NodeJs
深入浅析Nodejs的Http模块
Jun 20 NodeJs
nodejs模块学习之connect解析
Jul 05 NodeJs
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
Nov 01 NodeJs
NodeJS读取分析Nginx错误日志的方法
May 14 NodeJs
通过实例了解Nodejs模块系统及require机制
Jul 16 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实现清除MySQL死连接的方法
2016/07/23 PHP
PHP实现微信小程序用户授权的工具类示例
2019/03/05 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
Javascript学习笔记4 Eval函数
2010/01/11 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
Node.js编码规范
2014/07/14 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
Python实现的购物车功能示例
2018/02/11 Python
用python处理MS Word的实例讲解
2018/05/08 Python
Python实现查看系统启动项功能示例
2018/05/10 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
django Admin文档生成器使用详解
2019/07/22 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
python中tab键是什么意思
2020/06/18 Python
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
普天C++笔试题
2016/03/20 面试题
一年级家长会邀请函
2014/01/25 职场文书
《桥》教学反思
2014/04/09 职场文书
爱情保证书大全
2014/04/29 职场文书
学生安全责任书范本
2014/07/24 职场文书
服务员岗位职责
2015/02/03 职场文书
工作年限证明模板
2015/06/15 职场文书
导游词之晋城蟒河
2019/12/12 职场文书