基于socket.io的聊天室

github地址：https://github.com/beatsky/Node.js/tree/master/chatroom

socket.io

文档：https://socket.io/docs/

安装

npm install socket.io

服务端代码编写

建立服务

const http = require('http');
const fs= require('fs');
// 新建服务
const app = http.createServer();
app.listen(3000);
// 新建io服务
const server = http.createServer();
const io = require('socket.io')(server);
server.listen(3001);
var clientCount = 0;

由于只是小项目，暂时不用框架，模板。简单的加载下html文件

app.on('request', function (req, res) {
  var url = req.url;
  if (url === '/' || url === '/js/io.js' || url === '/js/md5.js') {
    if(url === '/'){
      var file_name = './views/index.html';
    }else{
      var file_name = './views/' + url;
    }
    fs.readFile(file_name, function (err, data) {
      if(err){
        res.end(`<h1>404as not found<h1>`);
      }else{
        res.end(data);
      }
    })
  }else{
    res.end(`<h1>404 not found<h1>`)
  }
})

socket代码

io.on('connection', function (socket) {
  clientCount++;                                                    // 记录进入聊天室人数
  socket.nickname = '第' +  clientCount + '人';
  io.emit('enter', '欢迎第' + clientCount + '名成员进入聊天室');      // 向所有客户端广播新进入聊天室
  socket.on('message', function (data) {
    io.emit('message', data);                                       // 向客户端推送新消息
    socket.name = data.name;
  })
  

  socket.on('disconnect', function(){
    if(socket.name){                                                 // 监听成员断开链接，并根据成员是否发言，做出判断
      io.emit('leave', socket.name + '离开聊天室');                   
    }else{
      io.emit('leave', socket.nickname + '什么也没说就走了');
    }
    
  })
});

客户端代码

// socket 端口
var socket = io.connect('http://localhost:3001');
// 获取相应元素节点
var sendBtn = document.getElementById('sendBtn');
var mess = document.getElementById('mess');
var panel = document.getElementById('panel');
var yourname = document.getElementById('yourname');
// 定义本地数据
var msgData = {};
// 生成 1~4随机数
var i = Math.round(4 * Math.random());
// 对话框颜色class
var colorArr = ["bg-primary", "bg-success", "bg-info", "bg-warning", "bg-danger"]

相应方法

// 将消息写入对应节点
function sendMessage(str, type) {
  var p = document.createElement('p');
  if(type == 'enter'){
    p.className = 'text-success';
    p.innerHTML = str;
  }else if(type == 'leave'){
    p.className = 'text-danger';
    p.innerHTML = str;
  }else{
    p.innerHTML = str.name + '：' + str.text;
    p.className = colorArr[str.num];
  }
  panel.appendChild(p);
  document.documentElement.scrollTop = document.documentElement.scrollHeight;
}

// 将最新消息添加黄色边框
function currentBubble() {
  var msgBubble = panel.getElementsByTagName('p');
  var len = msgBubble.length;
  msgBubble[len-2].style.border = 'none';
  msgBubble[len-1].style.border = '1px solid yellow';
}

// 设置成员名字
function setName() {
  sendBtn.onclick = function () {
    msgData.name = mess.value;
    msgData.text = '大家好我是 ' + msgData.name;
    msgData.num = i;
    if(msgData.text){
      yourname.innerHTML = msgData.name;
      socket.emit('message', msgData);
    }
    mess.value = '';
  }
}

// 发送消息
function txtInput() {
  sendBtn.onclick = function () {
    msgData.text = mess.value;
    if(msgData.text){
      socket.emit('message', msgData);
    }
    mess.value = '';
  }
}

// 判断是否已命名，执行对应方法
function chat(data) {
  if(data.name){
    txtInput();
  }else{
    setName();
  }
}

根据对用socket方法执行对应函数

socket.on('enter', function (data) {
  sendMessage(data, 'enter');
  chat(msgData);
})

socket.on('message', function (data) {
  sendMessage(data, 'message');
  chat(msgData);
})

socket.on('leave', function (data) {
  sendMessage(data, 'leave');
})