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

最新推荐文章于 2024-06-22 10:15:45 发布

NidleZ

最新推荐文章于 2024-06-22 10:15:45 发布

阅读量420

点赞数 2

文章标签： javascript node http

本文链接：https://blog.csdn.net/z937619657/article/details/112862357

版权

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

文件目录如下所示：
(node_modules文件夹以及package-lock.json为安装依赖使时的自动生成)

一、安装依赖

当运行服务器时，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标签中直接进行编写。
在这里插入图片描述

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

服务器

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

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、启动服务器

在这里插入图片描述

2、打开客户端

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

在这里插入图片描述
右键点击检查打开控制台，发现消息已接收。

此时服务器也接收到消息
因我刷新了一次网页，相当于服务器连接了客户端两次，故有两个helloServer

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

完整代码

服务器（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>

NidleZ

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
node+socket.io+HTTP简易聊天室

node+socket.io+HTTP简易聊天室用node+socket.io+HTTP做一个聊天室。聊天室主要由两部分构成，服务器（index.js）以及客户端（index.html）。文件目录如下所示：(node_modules文件夹以及package-lock.json为安装依赖使时的自动生成)一、安装依赖当运行服务器时，cmd会自动提醒你所需安装的库，此时，在当前目录下用npm即可安装。在聊天室项目中，所需库有express以及socket.io。express模块用于搭建服务器，s
复制链接

扫一扫