搭建多人聊天室（保姆级教学，从0开始）

PerCheung

已于 2022-09-21 05:19:01 修改

阅读量1w

点赞数 9

分类专栏： Node.js 文章标签： node.js web html5 js node

于 2021-06-26 12:35:43 首次发布

本文链接：https://blog.csdn.net/weixin_43982359/article/details/118245203

版权

Node.js 专栏收录该内容

1 篇文章 2 订阅

订阅专栏

我们需要Node.js

一、先来个最终效果图，我做的是手机端网页，不过用电脑也可在这里插入图片描述

哎呦，还不错吧，虽然我的聊天室极简，但也保证你的学习难度不会太大哦。

二、开始准备工作，下载node.js吧

注意：一会儿记得给你的npm和cnpm加个环境变量
博客园的node.js安装链接在此！！！

好的，如果你用这个保姆级链接安装node.js依然没有真正成功（你后面的聊天室搭建一定会出现问题），在我的实践下，错误大概是：
1、不要把node安装到c盘，c盘的文件操作是需要管理员权限的，而node的操作是依赖你的cmd面板的，一般来说cmd面板一开始是不会开启管理员权限的。
2、如果你真的安装在c盘，后面出现问题，可以打开cmd面板的管理员模式，再进一步操作与node有关的事情。

开始写我们的聊天室吧

一、在桌面创建一个文件夹，名字为app
在这里插入图片描述
二、在app文件夹内创建两个文件（不用往里面写东西，创建即可）

三、把这段代码放入index.html里（记事本打开放入即可，若你有编译器更好）

<!doctype html>
<html>

<head>
  <title>客户群聊界面</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: '微软雅黑'
    }

    #container {
      width: 100%;
      height: 1700px;
      background: #eee;
      position: relative;
      box-shadow: 40px 40px 110px #777;
    }

    .header {
      background: #25421ab0;
      height: 80px;
      color: #fff;
      line-height: 68px;
      font-size: 40px;
      padding: 0 20px;
    }


    body {
      width: 100%;
      background: #eee;
      position: relative;
      font: 60px;
    }

    form {
      background: #000;
      position: fixed;
      bottom: 0;
      width: 100%;
    }

    form input {
      border: 0;
      width: 80%;
      font-size: 40px;
    }

    form button {
      width: 20%;
      background: rgb(130, 224, 255);
      border: none;
      font-size: 40px;
    }

    #messages {
      list-style-type: none;
      margin: 0;
      padding: 0;
      font-size: 40px;
    }

    #messages li {
      padding: 5px 10px;
      font-size: 40px;
    }

    #messages li:nth-child(odd) {
      background: #eee;
    }
  </style>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
  <div class="header">
    <span style="float: left;">客户交流平台</span>
    <!--<span style="float: right;">14:21</span>-->
  </div>
  <ul id="messages"></ul>
  <form action="">
    <input id="m" placeholder="说点什么吧..." autocomplete="off" /><button>发送</button>
  </form>
</body>

<script src="/socket.io/socket.io.js"></script>
<script>
  var name = prompt("请输入你的昵称：");
  var socket = io()

  //发送昵称给后端，并更改网页title
  socket.emit("join", name)
  document.title = name + "的群聊"

  socket.on("join", function (user) {
    addLine(user + " 加入了群聊")
  })

  //接收到服务器发来的message事件
  socket.on("message", function (msg) {
    addLine(msg)
  })

  //当发送按钮被点击时
  $('form').submit(function () {
    var msg = $("#m").val() //获取用户输入的信息
    socket.emit("message", msg) //将消息发送给服务器
    $("#m").val("") //置空消息框
    return false //阻止form提交
  })

  function addLine(msg) {
    $('#messages').append($('<li>').text(msg));
  }
</script>

</html>

四、下面这段js代码当然是放到server.js中了

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var usocket = [];

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket){
  console.log('a user connected')

  socket.on("join", function (name) {
    usocket[name] = socket
    io.emit("join", name)
  })

  socket.on("message", function (msg) {
    io.emit("message", msg) //将新消息广播出去
  })

});

http.listen(3000, function() {
  console.log('listening on *:3000');
});

五、给你的文件夹安装点东西

NO.1 复制路径

NO.2 桌面属于c盘，我的node也安装在c盘，我当然是用管理员模式运行cmd啦，就是哪个命令提示符黑面板啦。
在这里插入图片描述
NO.3 cd一下你刚刚的app位置路径，就能在面板内打开文件夹（命令行操作开始，这就是1984年麦金塔系统以前操作电脑文件的方式）

NO.4 输入

cnpm install --save express

如图，你的文件夹里就多了两个东西
在这里插入图片描述

NO.5 再输入

cnpm install --save socket.io

哎呦，至此你的node聊天室环境搭建完成，至于socket是什么，感兴趣可以百度一下。
在这里插入图片描述

大功告成

输入

node server.js

下面出现一句 listening *:3000
在这里插入图片描述
至此，你的面板不要关，只需要打开浏览器，输入localhost:3000，即可访问自己的聊天室啦

最后一个问题

当然，你的聊天室不仅仅希望只有自己的电脑能访问吧，实际上，只需要你的朋友跟你在同一局域网内（通俗来说就是连同一个WiFi），然后你在面板内运行一句node server.js，你的朋友通过你的电脑的ip地址:3000（我就不示范了，毕竟暴露自己电脑的ip太危险啦）就能蹦进你的聊天室和你聊天啦，注意啦，就是把localhost这个单词换成你真正的ip地址就可以啦！如果你希望更多的人访问你的聊天室，就把网址放上服务器。

-----------------------------------------

什么？你问我网址是什么？你到底是不是学计算机的？网址就是IP地址加上你的端口号。额，端口号是什么？那个3000就是！如果你用过MySQL或者tomcat，那你应该听说过3306或者8080，没错，就是那个。

-----------------------------------------

哦，对了，是不是有人要源码？源码就是文章里面那个html和js啦，还有个json文件的源码是没有用的，后面环境搭建用自己电脑运行一下才能用，那后面俩文件也是node给你生成的，不用你自己写，你不搭建环境，我把文件夹全发给你，你电脑也跑不起来。

PerCheung

关注

9
点赞
踩
68

收藏

觉得还不错? 一键收藏
打赏
2
评论
搭建多人聊天室（保姆级教学，从0开始）

我们需要Node.js一、先来个最终效果图，我做的是手机端网页，不过用电脑也可哎呦，还不错吧，虽然我的聊天室极简，但也保证你的学习难度不会太大哦。二、开始准备工作，下载node.js吧博客园的node.js安装链接在此！！！好的，如果你用这个保姆级链接安装node.js依然没有真正成功（你后面的聊天室搭建一定会出现问题），在我的实践下，错误大概是：1、不要把node安装到c盘，c盘的文件操作是需要管理员权限的，而node的操作是依赖你的cmd面板的，一般来说cmd面板一开始是不会开启管理员权限
复制链接

扫一扫