基于Node.js,Express,Socket.io创建简单聊天室

最新推荐文章于 2023-03-07 16:09:02 发布

Coder_py

最新推荐文章于 2023-03-07 16:09:02 发布

阅读量784

点赞数

分类专栏： Node.js 文章标签： Node.js

本文链接：https://blog.csdn.net/Coder_py/article/details/74356698

版权

Node.js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

基于Node.js,Express,Socket.io创建简单聊天室

首先看服务器端：

//创建express服务器(注意：创建express服务器，需要http模块的支持)
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var port = process.env.PORT || 3030;
server.listen(port, function () {
  console.log('server listening at port %d', port);
});
//创建路由规则，客户端连接时（即打开http://127.0.0.1:3000/index.html），发送消息给客户端
app.use(express.static(__dirname + '/public'));//定义静态文件目录

//将socket.io绑定到express服务器
var io = require('socket.io').listen(server);
var namelist = [];//用于存储昵称
//给socket.io添加客户端连接服务器监听事件
io.on('connection', function (socket) {
  console.log('user connected');//输出客户端连接服务器日志
  socket.emit('welcome', {text: 'connected'});//发送消息给新连接服务器的客户端

  //服务器监听客户端提交的昵称，并判断是否已经存在
  socket.on('name', function (data, callback) {
    if (namelist.indexOf(data) === -1) {//昵称不存在
      callback(true);//从服务器返回给客户端的回调函数，昵称不存在返回true
      namelist.push(data);//存储新添加的昵称
      socket.uname = data;//用于断开连接时，从列表时删除
      console.log('昵称：' + namelist);
      io.sockets.emit('usernames', namelist);//把昵称列表广播给所有在线的用户
    }
    else {
      callback(false);//昵称存在，返回客户端为false
    }

  });
  //当有客户端断开连接时，重新发送昵称列表给所有在线客户端，实现实时更新
  socket.on('disconnect', function () {
    if (!socket.uname) return;
    if (namelist.indexOf(socket.uname) > -1) {//从在线列表删除断开连接的客户昵称
      namelist.splice(namelist.indexOf(socket.uname), 1);//数组中删除元素
    }
    console.log('昵称：' + namelist);
    io.sockets.emit('usernames', namelist);//把昵称列表广播给所有在线的用户
  });
  //服务器监听客户端发送的消息，并把消息广播给所有连接服务器的客户端
  socket.on('message', function (data) {
    io.sockets.emit('sendmessage', {senduser: socket.uname, message: data});
  });
});

页面逻辑处理：

var socket = io.connect('http://127.0.0.1:3030');//连接服务器
socket.on('welcome', function (data) {//监听事件，获取服务器发送的消息
    console.log(data.text);//输出消息
});
var doc = document,
    uname = doc.getElementById('uname'),
    addname = doc.getElementById('addname'),
    list = doc.getElementById('namelist'),
    message = doc.getElementById('message'),
    sendmessage = doc.getElementById('addmessage'),
    showmessage = doc.getElementById('show');
//提交表单，将昵称发送到服务器
addname.onsubmit = function () {
    if (uname.value === "") {
        alert("昵称不能为空！");
        return false;
    }
    socket.emit('name', uname.value, function (data) {//在服务器接收消息之后，接收来自服务器端的数据
        if (data) {//昵称不存在列表中，昵称添加成功
            console.log('successfully');//设置昵称成功
            addname.style.display = "none";//隐藏添加昵称表单
            sendmessage.style.display = "block";//显示发送消息表单
        }
        else {//昵称存在于列表
            alert('昵称已存在');
        }
    });
    return false;//阻止提交表单
};
//接收服务器广播的昵称列表，并显示在页面上
socket.on('usernames', function (data) {
    var html = '';
    for (var i = 0; i < data.length; i++) {
        html += '<li>' + data[i] + '</li>';
    }
    list.innerHTML = html;
});
//提交表单，将消息发送给服务器
sendmessage.onsubmit = function () {
    if (message.value === "") {
        alert("消息不能为空！");

    } else {
        socket.emit('message', message.value);
        message.value = "";//清空文本框

    }
    return false;//阻止提交表单
};
//接收服务器发送的客户端发送的消息，并显示在界面
socket.on('sendmessage', function (data) {
    var elem = doc.createElement('p');
    var txt = doc.createTextNode(data.senduser + ':' + data.message);
    elem.appendChild(txt);
    showmessage.appendChild(elem);
});

主页html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用socket.io和express创建一个聊天工具</title>
     <link rel="stylesheet" href="style.css"/>
    <style>

    </style>
</head>
<body>
<div id="content">
    <div id="show"></div>
    <div id="showlist">
        <ul id="namelist"></ul>
    </div>
    <div id="clear"></div>
    <form action="#" id="addname">
        <label for="uname">昵称：</label>
        <input type="text" id="uname" class="input"/>
        <input type="submit" value="添加昵称" class="btn"/>
    </form>
    <form action="#" id="addmessage">
        <label for="message">消息：</label>
        <input type="text" id="message" class="input"/>
        <input type="submit" value="发送消息" class="btn"/>
    </form>
</div>
<!--如果客户端和服务器在同一服务器上，将会自动提供socket.io客户端的库-->
<script src="/socket.io/socket.io.js"></script>
<script src="main.js"></script>
</body>
</html>

css:

* {
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei UI";
    font-size: medium;
}

#content {
    width: 80%;
    height: 500px;
    margin: 20px auto;
    background-color: aliceblue;
    border-radius: 10px;
    padding: 20px;
    border: 1px dashed black;
    position: relative;
}

#show {
    float: left;
    width: 50%;
    height: 400px;
    border: 1px solid black;
}

#showlist {
    overflow: hidden;
    padding-left: 40px;
}

#clear {
    clear: both;
}

#addmessage {
    display: none;
}

#addmessage, #addname {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 30px;
}

.input, .btn {
    height: 30px;
    border: none;
    border-radius: 3px;
}

.input {
    width: 300px;
}

.btn {
    width: 100px;
}

Coder_py

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基于Node.js,Express,Socket.io创建简单聊天室

基于Node.js,Express,Socket.io创建简单聊天室首先看服务器端：//创建express服务器(注意：创建express服务器，需要http模块的支持)var express = require('express');var app = express();var server = require('http').createServer(app);var p
复制链接

扫一扫