用NodeJs使用Io作一个聊天室

时间  2019-11-12
标签 nodejs 使用 一个 聊天室 繁體版
原文   原文链接
功能分析
咱们要作一个聊天室，简单起见，就不作私聊的功能了，那么咱们想要的功能能够是这些：
  1. 每一个人有本身的昵称，在进入聊天室的时候本身输入。
  2. 每一个人均可以发言
  3. 有一个区域用来展现全部的发言，而且要实时更新
  4. 有人加入的时候提示xxx加入了群聊
 
第一步，初始设定
 
1，在window安装nodejs，这一步省。
 
2，检查环境及安装
 
npm config ls    //修改文件夹名
 
npm install express  //安装express框架
 
npm install socket 
 
在E:\node_IM\development\node-chat当前目录，多出一个node_modules目录。
 
E:.
└─node-chat
    └─node_modules
        ├─express
        │  ├─lib
        │  │  ├─middleware
        │  │  └─router
        │  └─node_modules
        │      ├─.bin
        │      ├─accepts
        │      ├─array-flatten
        │      ├─body-parser
        │      │  └─lib
        │      │      └─types
        │      ├─bytes
        │      ├─content-disposition
        │      ├─content-type
        │      ├─cookie
        │      ├─cookie-signature
                ......    
        ├─socket.io
 
 
新建server.js文件在node-chat目录。
 
 
3，在vscode环境调试运行：
 
Administrator@7O1CMG3I79XXOLV MINGW64 /e/node_IM/development/node-chat
$ node server.js
listening on *:8080
 
 
 
 
第二步，聊天室页面的实现
1，在index.html中输入如下代码：
<!doctype html>
    <html>
    <head>
        <title>Socket.IO chat</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                font: 13px Helvetica, Arial;
            }
            form {
                background: #000;
                padding: 3px;
                position: fixed;
                bottom: 0;
                width: 100%;
            }
            form input {
                border: 0;
                padding: 10px;
                width: 90%;
                margin-right: .5%;
            }
            form button {
                width: 9%;
                background: rgb(130, 224, 255);
                border: none;
                padding: 10px;
            }
            #messages {
                list - style - type: none;
                margin: 0;
                padding: 0;
            }
            #messages li {
                padding: 5px 10px;
            }
            #messages li:nth-child(odd) {
                background: #eee;
            }
        </style>
      
        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        
    </head>
    <body>
        <ul id="messages"></ul>
        <form action="">
            <input id="m" autocomplete="off" /><button>发送</button>
        </form>
    </body>
    </html>
 
 
保存。

2，根目录跳转

前面咱们在server.js中写了根目录返回hello world，如今咱们让它跳转到聊天室页面。将server.js中的
//当访问根目录时，返回Hello World
app.get('/', function (req, res) {
   res.send('<h1>Hello world</h1>');
});
替换为
app.get('/', function(req, res){
   res.sendFile(__dirname + '/index.html');  
});
而后在CMD中ctrl+c结束，从新运行node server.js。
如今在浏览器中访问localhost:8080，已经跳转到聊天页面了。
 

第三，引入Socket

1，继续修改server.js，增长下方标注内容：
var express = require('express');
var app = express();
var http = require('http').Server(app); //将express注册到http中
var io = require('socket.io')(http);
//当访问根目录时，返回Hello World
app.get('/', function (req, res) {
    res.sendFile(__dirname+"/index.html");
});
 
var usocket = [];
io.on('connection',function(socket){
    console.log('a user connect');    //当有新的socket链接成功以后，就打印一下信息。
});
 
//启动监听，监听3000端口
http.listen(8080, function () {
    console.log('listening on *:8080');
});
 
 
2，而后编辑index.html，添加jquery.min.js和socket.io.js
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
 
而后咱们从新启动node服务，访问localhost:3000。就会有如下结果。
 
 
第三，添加交互
       当用户有动做的时候，咱们要显示在聊天面板中，就插入一个li标签好了。在index.html的script中写一个方法，后面显示什么内容，就调用这个方法在面模板中插入一条li就行了。在前面功能分析的时候，咱们就说用户刚进来的时候，须要输入本身的昵称。
将如下代码写到index.html中。
var name = prompt("请输入你的昵称：");
function addLine(msg) {
        $('#messages').append($('<li>').text(msg));
}

1，发送昵称数据到后端

       新用户发送本身的昵称给服务器后，要让全部处在聊天室的人知道，因此服务器要发一个广播。发送数据给后端，调用socket的emit方法，这里指定一个事件名字叫join，而后后端会处理这个事件。
而后如今咱们的script标签中是这样的。
<script>
    var name   = prompt("请输入你的昵称：");
    var socket = io()
    //发送昵称给后端
    socket.emit("join", name)
    function addLine(msg) {
        $('#messages').append($('<li>').text(msg));
    }
</script>

 

2，后端发送广播

       为了在后端区分用户，咱们用一个usocket数组来保存每个用户的socket实例。
首先监听join事件，在接收到昵称以后，将该用户的加入聊广播给全部用户。
server.js代码以下：
var express = require('express');
var app = express();
var http = require('http').Server(app); //将express注册到http中
var io = require('socket.io')(http);
 
//当访问根目录时，返回Hello World
app.get('/', function (req, res) {
    res.sendFile(__dirname+"/index.html");
});
 
var usocket = [];  //全局变量
io.on('connection',function(socket){ //
    console.log('a user connect');
     //监听join事件
    socket.on("join", function (name) {
        usocket[name] = socket;
        console.log(usocket);
        io.emit("join", name) //服务器经过广播将新用户发送给全体群聊成员
    })
    //new addition
    socket.on("message", function (msg) {
        io.emit("message", msg) //将新消息广播出去
    })
});
 
//启动监听，监听3000端口
http.listen(8080, function () {
    console.log('listening on *:8080');
});

而后在index.html的script中添加如下代码，接受到新用户加入事件的处理：
<script>
        var name = prompt("请输入你的昵称：");
        function addLine(msg) {
            $('#messages').append($('<li>').text(msg));
        }
 
        var socket = io();
         //发送昵称给后端
        socket.emit("join", name)
 
        //收到服务器发来的join事件时
            socket.on("join", function (user) {
                addLine(user + " 加入了群聊")
            })
 
        //接收到服务器发来的message事件
        socket.on("message", function (msg) {
                addLine(msg)
            })
 
       //当发送按钮被点击时
        $('form').submit(function () {
            var msg = $("#m").val() //获取用户的信息
            socket.emit("message", '('+ name+'):'+msg) //将消息发送给服务器
            $("#m").val("")
            return false; //阻止form提交
        })
</script>
 
如今咱们再来测试一下，node server.js开启后端服务，而后访问localhost:8080，输入用户名iimT
 
演示效果：
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程