使用socket.io制作一个聊天室

使用socket.io制作聊天室

效果图如下：
       登录页面展示：

       聊天室展示：

功能实现
1）显示当前加入聊天室的人数
2）显示当前登录的用户信息（头像及用户名），及当前在线的用户列表
3）显示某用户离开或进入聊天室的信息
4）可以发送聊天信息，包括文字，emoji表情，图片
5）登录

项目准备
       该功能基于node.js，express和socket.io实现的，因此要用node.js搭建服务器。并下载express框架和socket.io

1）下载express:

npm i express

2）下载socket.io（官网：https://socket.io/）
服务器：

npm i socket.io

客户端：

<script src="/socket.io/socket.io.js"></script>

3）下载emoji资源包
       a、下载
              http://eshengsky.github.io/jQuery-emoji/
       b、将下载好的文件放到项目中
       c、引入资源
              css:
                     1)jquery.mCustomScrollbar.min.css
                     2)jquery.emoji.css
              js:
                     1)jquery.js
                     2)jquery.mCustomScrollbar.min.js
                     3)jquery.mousewheel-3.0.6.min.js
                     4)jquery.emoji.min.js
       d、初识化（具体操作请看官网API）

代码解析

服务端（app.js）
       服务端的搭建

const app = require('express')();
const server = require('http').Server(app);
const io = require('socket.io')(server);
let users = [];

server.listen(8080);             //监听服务器端口

//将public设置为静态资源目录
app.use(require('express').static(__dirname+'/public',{index:'index.html'}));

       创建连接并监听事件

//每当有一个用户连接服务器，就会调用该函数，并创建一个socket对象
io.on('connection',socket=>{
    socket.on('login',data=>{
        //find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
        let user = users.find(function (item) {
            return item.userName === data.userName;
        });
        if(user){
            socket.emit('loginErr',{msg:'用户名已存在'})
        }else {
            users.push(data);
            socket.emit('loginSuccess',data);
            socket.userName =data.userName;
            socket.avatar = data.avatar;
            //向所有用户展示谁加入了聊天室
            io.emit('enterInfo',data);     //io.emit向所有用户发送消息

            //向所有用户展示在线人员列表
            io.emit('userList',users);
        }
    });

    //监听用户断开连接
    socket.on('disconnect',() => {
        let index = users.findIndex(function (item) {
            return socket.userName === item.userName;
        });
        users.splice(index,1);
        io.emit('leaveInfo',socket.userName);
        io.emit('userList',users);
    });

    //监听用户发送消息
    socket.on('sendInfo',data =>{
        io.emit('receiveInfo',data);         //将接收到的消息发送给所有人
    });

    //监听用户发送图片
    socket.on('sendImg',data =>{
        io.emit('receiveImg',data);         //将接收到的消息发送给所有人
    });
});

客户端

javascript代码

与服务器创建连接

var socket = io('http://localhost:8080');            //该端口要与你在服务器上监听的端口一致

注册登录事件，将用户名及头像传过去：

socket.emit('login',{userName:userN,avatar:avatarSrc});

发送图片

$('#file').change(function () {
        var file = this.files[0];
        //借助H5中的FileReader读取文件并发送到服务器
        var fr = new FileReader();
        fr.readAsDataURL(file);
        fr.onload  = function(){ //读取完成
            socket.emit('sendImg',{
                userName:userName,
                avatar:avatar,
                img:fr.result           //读取结果
            })
        }
    });

emoji表情的初识化
       btEmoji元素是点击生成emoji标签的按钮。具体请参考官网http://eshengsky.github.io/jQuery-emoji/

$('.btEmoji').click(function () {
        $("#info").emoji({
            button: ".btEmoji",
            showTab: false,
            animation: 'slide',
            position: 'topRight',
            icons: [{
                name: "QQ表情",
                path: "lib/qq/",
                maxNum: 91,
                excludeNums: [41, 45, 54],
                file: ".gif"
            }]
        });
    });

HTML代码
       若要将选择的emoji表情显示到编辑信息的文本框中，则不能使用textarea，而是应该使用div。再向div添加contenteditable属性，使其具有文本框的功能。

<div class="editContent" id="info" contenteditable="true"></div>

完整代码：
       github：https://github.com/han-qun/chatRoom
       码云：https://gitee.com/han-qun/chat-room