基于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 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 += '
  • ' + data[i] + '
  • '
    ; } 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:

    
    <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>
    
    <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;
    }

    你可能感兴趣的:(Node.js)