您现在的位置是：技术博客 > 前端前端

Node.js实现聊天室

Lucas2022-03-08 14:03【代码】897人已围观

简介nodejs实现聊天室

#### 一、搭建node

1、安装node

2、安装express模块

3、引入socket.io模块

```
npm install -g nodemon --save-dev
npm install socket.io --save-dev
```
#### 二、做一个小demo

创建 index.js 文件
```
var app = require('express')();
var http = require('http').createServer(app);

app.get('/', function(req, res){
  res.send('<h1>Hello world</h1>');
});

http.listen(8801, function(){
  console.log('listening on *:8801');
});
```
执行 node index.js ，浏览器访问出现Hello world字样。

#### 三、开始实现聊天室

修改 index.js 文件

```
app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});
```

创建 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>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
  </body>
</html>
```

执行 node index.js ，浏览器访问效果图如下：

![](/upload/article/image/3a/6ec8c41fb02657dc9b00260986cd53.png "")

#### 三、开始实现聊天室

修改 index.js 文件

```
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  const nickname = 'user' + Math.ceil((Math.random() * 1000))
  socket.broadcast.emit('connection', nickname + ' connected')

socket.on('chat message', (msg) => {
    io.emit('chat message', nickname + ': ' + msg)
  })
})

http.listen(8801, function(){
  console.log('listening on *:8801');
});
```

修改 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>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
  $(() => {
    const socket = io()
    $('form').submit((e) => {
      e.preventDefault()
      socket.emit('chat message', $('#m').val())
      $('#m').val('')
      return false
    });
    socket.on('chat message', (msg) => {
      $('#messages').append($('<li>').text(msg))
    })
    socket.on('connection', (msg) => {
      $('#messages').append($('<li>').text(msg))
    })
  });
</script>
  </body>
</html>
```
执行 node index.js ，浏览器访问效果图如下：

![](/upload/article/image/5d/d6591c5a1f1b4790d3d284cefbbb33.png)

#### 四、优化下聊天室

增加自定义用户名设置

修改 index.html 文件

```
<!doctype html>
<html>
  <head>
    <title>聊天室</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>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
    
    <script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>

$(() => {
    const socket = io()
    $('form').submit((e) => {
        e.preventDefault()
        socket.emit('chat message', $('#m').val())
        $('#m').val('')
        return false
    });
    
    socket.on('chat message', (msg) => {
        // $('#messages').append($('<li>').text(msg))
        $('#messages').append($('<li>').html(msg))
    })
    socket.on('connection', (msg) => {
        $('#messages').append($('<li>').html(msg))
    })
    socket.on('announcement', function(msg){
        window.prompt(msg);
    });
    
    // let count = 0;
    // setInterval(() => {
    //   socket.volatile.emit("ping", ++count);
    // }, 1000);

// 客户端监听hello事件
    socket.on("hello", (arg) => {
        
        var nickname = window.prompt('请输入你的昵称!');
        while(!nickname){
            nickname = window.prompt('请输入你的昵称!')
        }
        $('#messages').empty();
        // 显示给当前用户看的
        $('#messages').append($('<li>').html(nickname + '，进入了聊天室！'))
        // 向服务器发送join事件，将nickname传递过去
        socket.emit('join', nickname);
    });
    // socket.timeout(5000).emit("my-event", (err) => {
    //   if (err) {
    //       console.log(err);
    //     // the other side did not acknowledge the event in the given delay
    //   }
    // });
  });
</script>
  </body>
</html>
```

修改 index.js 文件

```
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
    res.sendFile(__dirname + '/index.html');
});

// 检查昵称是否重复
var checkNickname = function(name){
    // console.log(io.sockets.sockets);
    // return true;
    for(var k in io.sockets.sockets){
        if(io.sockets.sockets.hasOwnProperty(k)){
            if(io.sockets.sockets[k] && io.sockets.sockets[k].nickname == name){
                return true;
            }
        }
    }
    return false;
}

io.on('connection', (socket) => {
    
    var nickname = '佚名';
    
    // 1、用户首次连接聊天室，向客户端推送hello事件
    socket.emit("hello", "");
    
    // const nickname = 'user' + Math.ceil((Math.random() * 1000))
    
    
    // 监听客户端的join事件，接收nick值，nick是客户端约定的用户名字段
    socket.on('join', function(nick){
        // 检查是否有重复
        if(checkNickname(nick)){
            socket.emit('announcement', '昵称已被使用，请重新输入！');
        }
        // else{
        
        // 向客户端推送announcement事件，将欢迎语传递过去
        // socket.emit('announcement', '欢迎'+nick+'加入了聊天室!');
            
        nickname = nick;
        
        // 用户A进入聊天室后，将信息广播给其他用户
        socket.broadcast.emit('connection', nickname + '，进入了聊天室！')
        console.log(socket.id + ' ' + nickname + '，进入了聊天室！');
        // console.log(io.eio.clientsCount); // 获取链接数量，一个链接数量及一个客户端/用户
        // console.log(socket.adapter.rooms); // 获取所有房间 
    });
    
    // socket.on("ping", (count) => {
    //     console.log(count);
    // });
  
    // 用户发送消息
    socket.on('chat message', (msg) => {
        io.emit('chat message', '<font color="green">'+ nickname +'</font> : ' + msg)
    })
    
    // 用户离开聊天室
    socket.on('disconnect', () => {
        console.log(socket.id + ' ' +nickname +'，离开了聊天室');
        // console.log(socket.id);
        io.emit('chat message','<font color="red">'+ nickname +'，离开了聊天室！</font>')
    });
    
  
})

http.listen(8801, function(){
    // console.log 打印的数据会出现在服务器后台
    console.log('listening on *:8801');
});
```

很赞哦！ ( 0 )

上一篇：layui使用小技巧

下一篇：PS把图片背景图变成透明