基于nodejs和socket.io的聊天室

socket.io详细介绍可以查看官网

这里说一说我自己搭建的聊天室哦，源码在github:Jasonellen

首先我们来安装一下2个依赖`express`和`socket.io`

npm i express socket.io -S

让我们来开启一个服务器

//开启一个服务
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
server.listen(3000, function () {
  console.log('Server listening at http://localhost:3000');
});

// Routing
app.use(express.static(__dirname + '/src'));

//设置房间用户数量members
var members = 0;

前端HTML

<body>
  <!-- 首页供用户首次进入输入昵称 -->
  <div class="mymodal">
    <div class="content">
      <h1>请输入你的昵称</h3>
      <input type="text" maxlength="14" class='name'>
    </div>
  </div>
  <!-- 主页 聊天使用 -->
  <h2 class='text-center'>欢迎来到南南ChatRoom<br><small>xxx 正在输入...</small></h2>
  <ul></ul>
  <div class="input-group ipt">
    <input type="text" class="form-control" placeholder="请输入聊天内容" aria-describedby="send">
    <span class="input-group-addon" id="send">发送</span>
  </div>

  <script src="/socket.io/socket.io.js"></script>
  <script src='/lib/jquery.min.js'></script>
  <script src='./index.js'></script>
</body>

JS部分

先定义一些变量

var login = false; //还未登陆
var nameIpt = $('.content input') //输入用户名
var mesIpt = $('.ipt input') //消息输入框
var myModal = $('.mymodal'); //首次进入的modal框
var ul = $('ul') //详细列表box
var typing = $('small'); //正在输入
var username = ''; //用户名
var sendBtn = $('#send') //发送按钮
//定义socket
var socket = io();

定义几个常用的函数

//输入框获得焦点
function _focus(){
  //获取焦点
  if(!login && !(event.ctrlKey || event.metaKey || event.altKey)){
    //如果没有登录
    nameIpt.focus()
  }else if(!(event.ctrlKey || event.metaKey || event.altKey)){
    //登录成功
    mesIpt.focus()
  }
}

//添加一条聊天消息
function addMessage(data){
  var li = $('<li>').html(`<strong style='color:${data.color}'>${data.username}：</strong><span>${data.message}</span>`)
  li.fadeIn(3000)
  ul.append(li)
  ul.scrollTop(ul[0].scrollHeight)
  mesIpt.val('')
}

//添加欢迎消息
function welcome(data){
  var li = $('<li>').html(`<li><p>欢迎 ${data.username} 加入了聊天室 <br><span>目前聊天室共${data.members}人</span></p></li>`)
  ul.append(li)
  ul.scrollTop(ul[0].scrollHeight)
}
//输出日志
function log(data){
  var li = $('<li>').html(`<li><p class='lost'>${data}</p></li>`)
  ul.append(li)
  ul.scrollTop(ul[0].scrollHeight)
}

socket使用，监听/触发方法

//登录成功
socket.on('loginSuccess',function(data){
  login = true;
  username = data.username
  myModal.fadeOut()
  welcome(data)
})
//欢迎加入房间
socket.on('welcome',function(data){
    welcome(data)
})
//xxx离开房间
socket.on('leave',function(data){
  var li = $('<li>').html(`<li><p class='lost'>额.. ${data.username} 离开了聊天室 <br><span>目前聊天室共${data.members}人</span></p></li>`)
  ul.append(li)
  ul.scrollTop(ul[0].scrollHeight)
})
//消息发送成功
socket.on('sendMessageSuccess',function(data){
    addMessage(data)
})
//显示正在输入
socket.on('typingSuccess', function (username) {
    typing.text(`${username}正在输入...`).css('display','block').delay(2000).fadeOut();;
});
//本人失去连接
socket.on('disconnect', function () {
    log('您已失去连接正在尝试重连...')
});
//本人重连失败
socket.on('reconnect_error', function () {
    log('重连失败，再次尝试...')
});
//重连成功
socket.on('reconnect', function () {
  log('连接成功！');
  if (username) {
    //如果还在房间里，重新加入房间
    socket.emit('addUserRequest', username);
  }
});

主入口用户触发函数

//设置屏幕点击和按键按下 输入框自动获得焦点
$(window).on('click',function(e){    
    _focus();
})
$(window).on('keydown',function(e){
 _focus();
 //输入名字后按回车进入聊天室
 if(e.which === 13){
   if(!login){
     //如果没有登录 发送登录请求
     var _name = nameIpt.val().trim()
     if(_name){
       socket.emit('addUserRequest', _name);
     }
   }else{
     //已经登录发送消息
     var message = mesIpt.val().trim()
     if(message){
       socket.emit('sendMessageRequest', message);
     }
   }
 }
//按钮发送
sendBtn.click(function(){
  var message = mesIpt.val().trim()
   if(message){
     addMessage({username,message})
     socket.emit('sendMessageRequest', message);
   }
})
//用户输入消息是触发typing
mesIpt.on('input', function() {
    socket.emit('typingRequest', username);
});

本人还是喜欢贴出完整代码+简短叙事，逻辑看懂了什么都懂了..还有什么疑问的话可以上我的github给我留言o

OVER

2017-06-11

socket.io详细介绍可以查看官网

这里说一说我自己搭建的聊天室哦，源码在github:Jasonellen

首先我们来安装一下2个依赖express和socket.io

让我们来开启一个服务器

前端HTML

JS部分

本人还是喜欢贴出完整代码+简短叙事，逻辑看懂了什么都懂了..还有什么疑问的话可以上我的github给我留言o

OVER

首先我们来安装一下2个依赖`express`和`socket.io`