node.js搭建简易版本的聊天室

首先要先安装node,node的安装教程可以百度安装完成node之后新建一个文件夹，里面新建一个server.js文件和index.html文件。server.js负责服务器方面的内容，index.html负责网页渲染方面的内容。如图所示：下面打开cmd安装依赖：由于npm是国外的库安装速度可能有点慢，可以安装cnpm淘宝镜像，执行下面命令npm install -g cnpm --re...

菜鸭子

406人浏览 · 2020-04-08 09:58:36

菜鸭子 · 2020-04-08 09:58:36 发布

首先要先安装node,node的安装教程可以百度
安装完成node之后新建一个文件夹，里面新建一个server.js文件和index.html文件。server.js负责服务器方面的内容，index.html负责网页渲染方面的内容。如图所示：
在这里插入图片描述
下面打开cmd安装依赖：
由于npm是国外的库安装速度可能有点慢，可以安装cnpm淘宝镜像，执行下面命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后输入

cnpm install --save express

等待安装成功，再安装

cnpm install --save socket.io

这个只是简易版聊天室，功能有限，主要功能是：加入聊天，显示聊天内容，具体功能可以后续优化
后端用的是node搭建的服务器，结合express+socket使用
代码如下：

const app = require('express')();
const http = require('http').Server(app); //将express注册到http中

//new addition
const io = require('socket.io')(http);


//访问根目录时，返回到聊天室页面
app.get('/',function(req,res){
    res.sendFile(__dirname + '/index.html');
});

let userSocket = [];//保存每一个用户的socket实例
//new addition
//当新的socket连接成功之后就打印一下信息
io.on('connection',function(socket){
    console.log('a user connected');

    //监听join事件
    socket.on("join",function (name){
        userSocket[name] = socket;
        io.emit("join",name); //服务器通过广播将新用户发送给全体群聊成员
    })

    //new addition
    socket.on("message", function(msg){
        io.emit("message",msg); //将新消息广播出去
    })
});
//end

//启动监听，监听3000端口
http.listen(3000,function(){
    console.log('listening on * :3000');
});

客户端代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>chat-demo</title>
</head>
    <style>
       /*具体样式可以自行设计，这里就不展示了*/
  </style>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
    <ul id="message"></ul>
    <form action="">
        <input id="m" autocomplete="off"/>
        <button>发送</button>
    </form>

   
    <script src="/socket.io/socket.io.js"></script>
    <script>
        let name = prompt("请输入你的昵称：");
        //当页面加载完成后新建一个io对象
        const socket = io();
		
		//通过li标签将消息渲染到页面中
        function addLine(msg){
            $('#message').append($('<li>').text(msg));
        }
        
        //发送昵称给后端
        socket.emit("join",name);
        document.title = name + "的群聊";
        
        //收到服务器发来的join事件时
        socket.on("join",function (user){
            addLine(user + "加入了群聊");
        })

        //接受到服务器发来的message事件将新消息呈现在面板中。
        socket.on("message",function(msg){
            addLine(msg);
        })

        //当点击发送按钮被点击时
        $('form').submit(function (){
            let msg = $('#m').val(); //获取用户发送的信息
            socket.emit("message",msg);
            $("#m").val(""); //置空消息栓
            return false;  //阻止form提交
        })
    </script>
</body>
</html>