NodeJS实现一个聊天室功能

2024-03-29 20:40:43

看效果

一直说我喜欢卖关子，这次直接看效果：

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

前文

先说一下为什么写这个东西，最近不是在写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吧，为了安全

当然上面我用的一些可能比较‘原生'，直接创建元素什么的，我是因为没有引入类似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实现多房间简易聊天室功能

1.前端界面代码前端不是重点,够用就行,下面是前端界面,具体代码可到github下载. 2.服务器端搭建本服务器需要提供两个功能:http服务和websocket服务,由于node的事件驱动机制,可将两种服务搭建在同一个端口下. 1.包描述文件:package.json,这里用到了两个依赖项,mime:确定静态文件mime类型,socket.io:搭建websocket服务,然后使用npm install 安装依赖 { "name": "chat_room",
nodejs+express搭建多人聊天室步骤

前言本文主要是笔者在学习node的时候,作为练手的一个小项目,花了几天空余时间,边码边写教程的一个过程.适用于对node理论知识看的多,实战少的同学,那么现在就让我们开始吧! 准备工作新建一个文件夹 chatroom 在终端输入以下命令,按照步骤npm(没装过的去官网安装下node和npm)会自动给你生成一个package.json文件安装express和socket.io package.json文件如下: //package.json { "name": "chat
nodejs和react实现即时通讯简易聊天室功能

npx create-react-app socketio-demo 进入socketio-demo目录运行eject进行拆包,本项目也可以不拆,这是个人习惯. 注意如果运行eject命令最好在项目初始阶段执行,已经开始编写后不要再使用容易出现bug,新人谨慎使用eject命令 yarn eject 项目拆包后创建服务器文件夹和文件 mkdir server type null>index.js 创建完成后目录如下编写即时通讯(聊天室)后台安装nodejs插件 npm i express
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室

一,利用Node搭建静态服务器这个是这个项目的底层支撑部分.用来支持静态资源文件像html, css, gif, jpg, png, javascript, json, plain text等等静态资源的访问.这里面是有一个mime类型的文件映射. mime.js /** * mime类型的 map * @ author Cheng Liufeng * @ date 2014/8/30 * 当请求静态服务器文件的类型 html, css, gif, jpg, png, javascript,
基于Nodejs利用socket.io实现多人聊天室

socket.io简介在Html5中存在着这样的一个新特性,引入了websocket,关于websocket的内部实现原理可以看这篇文章,这篇文章讲述了websocket无到有,根据协议,分析数据帧的头,进行构建websocket.虽然代码短,但可以很好地体现websocket的原理. ,这个特性提供了浏览器端和服务器端的基于TCP连接的双向通道.但是并不是所有的浏览器都支持websocket特性,故为了磨平浏览器间的差异,为开发者提供统一的接口,引入了socket.io模块.在不支持webs
nodejs实现的一个简单聊天室功能分享

今天我来实现一个简单的聊天室,后台用nodejs, 客户端与服务端通信用socket.io,这是一个比较成熟的websocket框架. 初始工作 1.安装express, 用这个来托管socket.io,以及静态页面,命令npm install express --save,--save可以使包添加到package.json文件里. 2.安装socket.io,命令npm install socket.io --save. 编写服务端代码首先我们通过express来托管网站,并附加到socke
NodeJS实现一个聊天室功能

看效果一直说我喜欢卖关子,这次直接看效果: 聊天界面(喜欢的可以自己画一个比较逼真的页面) 前文先说一下为什么写这个东西,最近不是在写NodeJS知识点的梳理嘛,但是我发现梳理的过程着实无聊的要死,虽然已经快梳理一半了,只是还没发布,这个不重要,重要的是不做点什么东西确实无聊,所以今天把我做这个的过程记录给你们看一下,喜欢的可以拿去玩玩.实现的功能是可以聊天,可以显示用户自定义的昵称,并且显示发送时间 PS:这个功能如果我们使用webstorm新建一个express app的项目的话,是可以
java实现一个简单TCPSocket聊天室功能分享

本文实例为大家分享了java实现TCPSocket聊天室功能的相关代码,供大家参考,具体内容如下 1.TCPserver.java import java.net.*; import java.io.*; import java.util.*; import java.util.concurrent.*; public class TCPserver{ private static final int SERVERPORT = 8888; private ServerSocket MyServe
Redis实现多人多聊天室功能

本文为大家分享了Redis支持多人多聊天室功能的设计代码,供大家参考,具体内容如下设计原理左边的一个数据域,代表两个聊天室,聊天室id分别是827,729 在聊天室827里,有2个人,分别是jason22,jeff24他们分别已经阅读过聊天室内的id为5和6的消息右边的一个数据域,代表了用户在不同的聊天室,jason22参与了827与729聊天室,在这两个聊天室里,他分别阅读到了id为5和id为10的消息另外827聊天室内id为5的消息与729聊天室内id为5的消息不一样. 同时还有三个
java利用Socket实现聊天室功能实例

最近研究了下Java socket通信基础,利用代码实现了一个简单的多人聊天室功能,现把代码共享下,希望能帮到有兴趣了解的人. 目录结构: ChatClient: package com.panda.chat; import java.awt.*; import java.awt.event.*; import java.io.*; import java.net.*; @SuppressWarnings("serial") public class ChatClient extend
Java基于中介者模式实现多人聊天室功能示例

本文实例讲述了Java基于中介者模式实现多人聊天室功能.分享给大家供大家参考,具体如下: 一模式定义中介者模式,用一个中介对象来封装一系列对象之间的交互,使各个对象中不需要显示地引用其他对象实例,从而降低各个对象之间的耦合度,并且可以独立地改变对象间的交互关系. 二模式举例 1 模式分析我们借用多人聊天室来说明这一模式 2 中介模式静态类图 3 代码示例 3.1中介者接口--IMediator package com.demo.mediator; import com.demo.coll
Python实现基于C/S架构的聊天室功能详解

本文实例讲述了Python实现基于C/S架构的聊天室功能.分享给大家供大家参考,具体如下: 一.课程介绍 1.简介本次项目课是实现简单聊天室程序的服务器端和客户端. 2.知识点服务器端涉及到asyncore.asynchat和socket这几个模块,客户端用到了telnetlib.wx.time和thread这几个模块. 3.所需环境本次课中编写客户端需要用到wxPython,它是一个GUI工具包,请先使用下面的命令安装: $ sudo apt-get install python-wxt
python实现简单聊天室功能可以私聊

本文实例为大家分享了python实现简单聊天室功能的具体代码,供大家参考,具体内容如下公共模块首先写一个公共类,用字典的形式对数据的收发,并且进行封装,导入struct解决了TCP的粘包问题,并在公共类中进行了异常处理 import socket,struct,json def send_dic(c,dic): dic_json=json.dumps(dic) dic_json_length=len(dic_json.encode('utf-8')) struct_dic_json_leng
Java NIO实战之聊天室功能详解

本文实例讲述了Java NIO实战之聊天室功能.分享给大家供大家参考,具体如下: 在工作之余花了两个星期看完了<Java NIO>,总体来说这本书把NIO写的很详细,没有过多的废话,讲的都是重点,只是翻译的中文版看的确实吃力,英文水平太低也没办法,总算也坚持看完了.<Java NIO>这本书的重点在于第四章讲解的"选择器",要理解透还是要反复琢磨推敲:愚钝的我花了大概3天的时间才将NIO的选择器机制理解透并能较熟练的运用,于是便写了这个聊天室程序. 下面直接上代

NodeJS实现一个聊天室功能

相关推荐

随机推荐