NodeJS 搭建一个本地的服务，实现一个简单的公屏发消息

本 Chat 主要是写关于 Node.js 如何搭建一个本地的服务，然后做一个简单的可以发消息的功能。

安装 Express
安装 Nodemon
使用 Nodemon
安装 socket.io
socket.io 奇怪的本地 JS

Express 框架

Express

介绍一下吧：就是基于 NodeJS 平台、快速、开放、极简的 web 开发框架

安装 Express

npm install express --save安装结束我们基本都疯了，为什么，之前我们安装 jquery 的时候，node_modules 里面只有一个 jquery 文件是不是，但是我们安装结束这个 express 框架以后呢，里面会多出很多我们不认识的东西，其实这个是什么呢？不要害怕，其实我也不知道，但是我清楚的是他都是 express 框架需要的东西，所以我们不用理会就是了。

Express （node_modules 结构介绍）

看结构：

lib

这个里面是一些 js，路由，中间件都会在这

index.js

这个里面打开以后就一句话，我理解的就是将 express 引入，然后导出去成公共的可以使用的 js，嗯一定是这样的。

package.json

这个鬼东西又出现了，为什么呢？因为本身 express 就是一个框架，所以他也是依赖很多别的库，这里就是存放的他所引入的一些库（模块）

express.js

这个才是王道，也是本尊，这里里面写的是当前框架使用的模块，以及将一些方法名字和实现，都写在这里，也是我们本质使用的东西，具体他怎么实现的，其实我们仔细研究一下，他的代码就是我们之前写的那些东西，只是他将这些东西封装起来了，理论上我也可以，实践中..emmmm,好吧，不要在意这些细节，我们只要会使用就可以了

nodemon 工具

nodemon

介绍：他就是一个工具，然后呢，他是帮我们进行项目的启动等一些操作的工具，就可以了
说一下这个东西有多厉害吧，就是你更改了文件以后，你的应用会被这个东西给你重启，也就是我们 vue 里面说的热更新，应该是吧，嗯官方说的好像是这个意思。（emmmm..一定是

安装 nodemon

npm install -g nodemon --save-dev这里需要说明一点就是这个工具需要我们进行全局安装使用，所以命令是上面的那个，如果你是 mac 的话命令是这样的：sudo npm install -g nodemon --save-dev换一台笔记本吧还是：

使用 nodemon

我们想使用 nodemon 很简单，一行命令：
nodemon + 需要启动的文件名字看图：
分析一下每一句话是什么：
2.0.0 你就认为是版本吧
ro restart at any time enter 'rs'意思是说你输入 rs 可以随时进行重启你当前的 js
watching dir(s): .
watching extensions: js,mjs,json意思是说这个鬼东西会一直监听你的 js 文件
starting node csdn_demo.js就是说他替代了你正常启动 js 的那个方式，我们正常不是 node + js 文件吗，现在是 nodemon+js 文件
over这个时候我们看一下，我们的服务是不是起来了，我们访问一下之前写的 htmlemmmm...看起来没有什么问题。没有问题就是最大的问题，有人就问了，折腾这么久为了什么，是为了时刻监听你的 js 的变化，然后作出相应的改变不是吗？emmmm 好像是的，那么我们测试一下：我加了一句话，嗯，看情况确实监听了：

socket

安装 socket

npm install socket.io

奇怪的使用

首先我们将代码实现，既然是 socket，一定是与服务有关的，那么我们直接创建一个服务器：

/** * @author clearlove * @aim 做一个小东西 *///引入 fsvar fs = require('fs')var http = require('http')/** * 搭建一个服务器 */var server = http.createServer(function (res, res) {    /**     * 这块处理的是 第二次请求的/favicon.ico 的情况     */    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)    }})server.listen(8888, '127.0.0.1');console.info("server is running...")

这个时候我们正常启动是没有任何问题的，之前已经试过了，但是我们可以输入别的网址试一试：我们输入：http://127.0.0.1:8888/socket.io/socket.io.js显示这个是没有任何问题的，但是我们将 socket.io 写上以后我们再试试：

/** * @author clearlove * @aim 测试 socket.io *///引入 fsvar fs = require('fs')var http = require('http')/** * 搭建一个服务器 */var server = http.createServer(function (res, res) {    /**     * 这块处理的是 第二次请求的/favicon.ico 的情况     */    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)    }})var io = require('socket.io')(server);server.listen(8888, '127.0.0.1');console.info("server is running...")

我们使用 nodemon 启动：这个时候我们直接打开是没有问题的，但是当我们输入上面的网址的时候会发现：你得到的不是你的页面了，而是一个 js 文件里也就是 socket.i j 的 js 文件，这个现象记住就可以了，说白了写上 socket.io 以后上面的网址就变成了一个 js 的本地地址了
建立一个 socket 连接想要创建一个 socket 连接首先要求是我们必须是 html 的脚本语言，不然他连个锤子，所以，我们在 js 中先声明一个 io 使用

/** * @author clearlove * @aim 测试连接一个 socket.io *///引入 fsvar fs = require('fs')var http = require('http')/** * 搭建一个服务器 */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)    }})var io = require('socket.io')(server);io.on("connection",function (socket) {    console.info("一个 socket 连接成功了")})server.listen(8888, '127.0.0.1');console.info("server is running...")

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>http_demo</title>        <script src="/socket.io/socket.io.js"></script>        <script>            var socket = io()        </script>        <style>            body{                background: #307ac6;                text-align: center;                color: aliceblue;                margin: 10% 10%            }            p{                font-size: 2rem            }        </style>    </head>    <body>        <h1>            WelCome to CSDN of clearlove        </h1>        <p>            If you like my article, you can follow my blog        </p>    </body></html>

我们启动它：刷新页面：这个时候我们看控制台：连接成功了，我知道 js 里面的如果你一直看我的文章你可以看的明白，但是 html 里里面的那段引入 js 你脑子里面的因该是嗡嗡的，下面说一下，首先确定一下这个是一个 tcp 连接，然后我们拿到一个 socket 对象，其实这个就是一个 websocket 连接，怎么看出来呢？看这里：那么这个 websocket 连接好了以后，客户端和服务器度端其实就可以进行一个简单的通信了，那么我们创建好一个 io 对象以后呢，他们就有了自己对象的属性 emit 和 on 属性，on 是用来接收，emit 是用来发送，那么发送自然是客户端的事情，接收自然是服务端的事情，这个时候我们写一个简单的通信：

客户端：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>http_demo</title>        <script src="/socket.io/socket.io.js"></script>        <script>            var socket = io();            socket.emit("link_to_server","请问这是 csdn 最帅博主的博客吗？")        </script>        <style>            body{                background: #307ac6;                text-align: center;                color: aliceblue;                margin: 10% 10%            }            p{                font-size: 2rem            }        </style>    </head>    <body>        <h1>            WelCome to CSDN of clearlove        </h1>        <p>            If you like my article, you can follow my blog        </p>    </body></html>

服务端

/** * @author clearlove * @aim 测试连接一个 socket.io 通信 *///引入 fsvar fs = require('fs')var http = require('http')/** * 搭建一个服务器 */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)    }})var io = require('socket.io')(server);io.on("connection",function (socket) {    console.info("一个 socket 连接成功了")    socket.on("link_to_server",function(msg){        console.info(`我收到了一个问题 ${msg}`)    })})server.listen(8888, '127.0.0.1');console.info("server is running...")

我们运行一下：既然是交互，就要完整，这个时候我们让服务端给我们回答：服务端：

/** * @author clearlove * @aim 测试连接一个 socket.io 通信 *///引入 fsvar fs = require('fs')var http = require('http')/** * 搭建一个服务器 */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)    }})var io = require('socket.io')(server);io.on("connection",function (socket) {    console.info("一个 socket 连接成功了")    socket.on("link_to_server",function(msg){        console.info(`我收到了一个问题 ${msg}`)        socket.emit('link_to_client','of course')    })})server.listen(8888, '127.0.0.1');console.info("server is running...")

客户端：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>http_demo</title>    <script src="/socket.io/socket.io.js"></script>    <script>        var socket = io();        socket.emit("link_to_server", "请问这是 csdn 最帅博主的博客吗？")        socket.on('link_to_client', function (msg) {            document.getElementById('info').innerHTML = `收到回答：${msg}`        })    </script>    <style>        body {            background: #307ac6;            text-align: center;            color: aliceblue;            margin: 10% 10%        }        p {            font-size: 2rem        }    </style></head><body>    <h1>        WelCome to CSDN of clearlove    </h1>    <p>        If you like my article, you can follow my blog    </p>    <p id="info"></p></body></html>

运行服务：
客户端展示：这个时候通信就基本建立起来了。
写一个广播的效果前面说我们的做的是一个简单的通信，也就是说我们的通信是一对一的，其实，也可以说我们每个人的 socket 都是一对一的监听，怎么看出来呢？我们可以测试一下：
我打开一个隐身窗口出来，相当于一个新人，那么我代码 alert 一句话，收到的信息提示出来：

可以看到，上面的正常的没有提示，隐身的提示了，这个就是他们两个不会相互干扰，那么我们做通信的时候有的时候是需要全部都知道的，socket 里面也有可以直接发出广播的东西，我们前面说他因为 socket 是一对一的，但是 io 不是，所以我们使用 io 直接通信的话，是不是就是广播了呢？看代码：

/** * @author clearlove * @aim 测试连接一个 socket.io 通信 广播 *///引入 fsvar fs = require('fs')var http = require('http')/** * 搭建一个服务器 */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)    }})var io = require('socket.io')(server);io.on("connection",function (socket) {    console.info("一个 socket 连接成功了")    socket.on("link_to_server",function(msg){        console.info(`我收到了一个问题 ${msg}`)        //这里使用 io 发送        io.emit('link_to_client','of course')    })})server.listen(8888, '127.0.0.1');console.info("server is running...")

看效果：

有人说这不是一样的吗？emmm...我说我点击的是左边的刷新你们信吗....嗯，我知道你们不信，但是我确实点击的是左边的刷新，但是左边的提示结束以后，右边的也提示了,好吧是我截图的问题：
这次应该信了，我只点击了左边的，你们可能还不信，emmmm，那我们做一个公屏只能是信息的功能吧，玩过王者荣耀吧，当你找不到一起玩的队友的时候，可以公屏喊话，这个时候不管谁说话，都可以看到，我们就做一个这样的功能：看代码：客户端：

<!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>    <div id="infos">    </div>    <input type="text" id="send_info" value="" placeholder="请输入您想说的话" />    <button type="button" id="btn">发送</button></body><script>    var socket = io();    document.getElementById("btn").onclick = function () {        socket.emit("link_to_server", document.getElementById("send_info").value)    }    socket.on('link_to_client', function (msg) {        document.getElementById('infos').append(`${msg}`)    })</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: 15vw;        width: 400px;        height: 500px;        overflow: hidden;        border: none;        background: #ffffff;        color: #000000;    }</style></html>

服务端：

/** * @author clearlove * @aim 测试连接一个 socket.io 通信 广播 *///引入 fsvar fs = require('fs')var http = require('http')/** * 搭建一个服务器 */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)    }})var io = require('socket.io')(server);io.on("connection",function (socket) {    console.info("一个 socket 连接成功了")    socket.on("link_to_server",function(msg){        console.info(`我收到了一个问题 ${msg}`)        //这里使用 io 发送        io.emit('link_to_client',msg)    })})server.listen(8888, '127.0.0.1');console.info("server is running...")

效果：

后文

写到这里就暂时不写了，差不多了，写太多好像你们也不好消化，将就着看吧，可能我写的不是很好，但是代码直接运行还是没有问题的，感谢阅读，有问题及时联系我哦，共勉！

本文首发于 GitChat，未经授权不得转载，转载需与 GitChat 联系。

阅读全文: http://gitbook.cn/gitchat/activity/5dd6729d94910f2ac9d7197f

您还可以下载 CSDN 旗下精品原创内容社区 GitChat App ， GitChat 专享技术内容哦。