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

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

我们需要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里(记事本打开放入即可,若你有编译器更好)

客户群聊界面

客户交流平台

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

    文章创作不易🌹本人失业在家收入断档

    若您喜欢我的内容,如您能帮忙【打赏】【点赞】【转发】【收藏】【关注】,本人不胜感激。

    相关文章

    十万个为什么图片推荐
    体育365真正官网下载

    十万个为什么图片推荐

    06-30 9100
    uc浏览器怎么进入阅读模式
    体育365真正官网下载

    uc浏览器怎么进入阅读模式

    07-19 7651
    王者荣耀星元皮肤获取方法大全
    手机app足球365现金

    王者荣耀星元皮肤获取方法大全

    08-10 9670
    錆的意思
    365bet怎么提款

    錆的意思

    08-02 5781
    中国工商银行中国网站
    365bet怎么提款

    中国工商银行中国网站

    07-12 2155
    Soft On Demand
    体育365真正官网下载

    Soft On Demand

    07-23 6939
    「概」字组词
    体育365真正官网下载

    「概」字组词

    07-28 5170