搭建多人聊天室(保姆级教学,从0开始) 您所在的位置:网站首页 余杭聊天室 搭建多人聊天室(保姆级教学,从0开始)

搭建多人聊天室(保姆级教学,从0开始)

2023-08-13 17:25| 来源: 网络整理| 查看: 265

我们需要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> 客户群聊界面 * { 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; } 客户交流平台 发送 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($('').text(msg)); }

四、下面这段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给你生成的,不用你自己写,你不搭建环境,我把文件夹全发给你,你电脑也跑不起来。



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有