node+socket.io+HTTP简易聊天室

用node+socket.io+HTTP做一个聊天室。聊天室主要由两部分构成,服务器(index.js)以及客户端(index.html)。

文件目录如下所示:
(node_modules文件夹以及package-lock.json为安装依赖使时的自动生成)node+socket.io+HTTP简易聊天室_第1张图片

一、安装依赖

当运行服务器时,cmd会自动提醒你所需安装的库,此时,在当前目录下用npm即可安装。

在聊天室项目中,所需库有express以及socket.io。
express模块用于搭建服务器,socket.io模块用于前后端传递消息

npm install express
npm install socket.io

二、服务器(index.js)

1、引入模块

引入express模块

var express = require('express');           //引入express模块
var app = express(); //创建一个 Express 应用。express()是一个由express模块导出的入口(top-level)函数。

引入http模块,createServer创建用于接收http客户端请求并返回响应的http服务器应用程序。

var server = require('http').createServer(app);

引入socket.io模块

var io = require('socket.io')(server);

:1、require方法根据模块路径查找模块, 如果是完整路径, 直接引入模块。
2、以下两段代码含义相同。

var app = require('express')();
var express = require('express');           //引入express模块
var app = express(); 
2、添加访问地址
/** 添加一个index的访问地址 */
app.get('/index', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

使服务器监听3003端口

server.listen(3003,function(){
    console.log('server start')
});

结合所用的http协议,以及端口与访问地址,可知所用网址为:

http://localhost:3003/index.html
(localhost为本地网址)

服务器与客户端交互在四进行讲解

三、客户端(index.html)

网页一般由三部分构成,html提供大概框架,CSS主要用于格式的美化改变,而JavaScript主要是网页的功能部分,它可以被封装于函数中间接调用,也可以在script标签中直接进行编写。
node+socket.io+HTTP简易聊天室_第2张图片

四、服务器与客户端的交互

服务器

//注释段主要用于检验客户端与服务器相互通信是否可以正常进行,类似服务器与客户端通信的死循环

io.on('connection', function (socket) {         //监听客户端
    socket.emit('news', 'helloClient');         //客户端连接时发送news事件
    socket.on('online', function (data) {        //监听客户端连接online事件
        console.log(data)
        // socket.emit('news', 'hello');  
    });
});

客户端

        <script>
            var socket = io.connect('http://localhost:3003');//页面初始化时向服务器发起连接
            socket.on('news', function (data) {//客户端news事件监听
                console.log(data);
                socket.emit('online','helloServer');//连接成功时发送online事件
            });
        </script>

五、 最终效果

1、启动服务器

node+socket.io+HTTP简易聊天室_第3张图片

2、打开客户端

一定要输入网址打开 http://localhost:3003/index.html

node+socket.io+HTTP简易聊天室_第4张图片
右键点击检查打开控制台,发现消息已接收。
node+socket.io+HTTP简易聊天室_第5张图片
此时服务器也接收到消息
因我刷新了一次网页,相当于服务器连接了客户端两次,故有两个helloServernode+socket.io+HTTP简易聊天室_第6张图片

大家可以自行检测下客户端与服务器连续相互通信情况

完整代码

服务器(index.js)

var express = require('express');           //引入express模块
var app = express();             //创建一个 Express 应用。express()是一个由express模块导出的入口(top-level)函数。
var server = require('http').createServer(app);
var io = require('socket.io')(server);

/** 添加一个index的访问地址 */
app.get('/index', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function (socket) {         //监听客户端
    socket.emit('news', 'helloClient');         //客户端连接时发送news事件
    socket.on('online', function (data) {        //监听客户端连接online事件
        console.log(data)
        // socket.emit('news', 'hello');  
    });
});

server.listen(3003,function(){
    console.log('server start')
});

客户端(index.html)

<!DOCTYPE html>
<html>
    <head>
        <title>简易聊天室</title>
        <script src="/socket.io/socket.io.js"></script>
    </head>
    <body>
        <script>
            var socket = io.connect('http://localhost:3003');//页面初始化时向服务器发起连接
            socket.on('news', function (data) {//客户端news事件监听
                console.log(data);
                socket.emit('online','helloServer');//连接成功时发送online事件
            });
        </script>
    </body>
</html>

你可能感兴趣的:(javascript,node,http)