本文共 4178 字，大约阅读时间需要 13 分钟。

基于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：

    
            
       
   
    
    
    
    
        
     
    
    
    
    
    
    
        
     昵称：        
             
         
    
    
    
        
     消息：        
             
         
    
   
   

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

转载地址：http://lvcqb.baihongyu.com/