零基础实现node+express个性化聊天室的示例(4)

日期：2020-05-11 栏目：程序人生浏览：次

服务器端接受到来自用户的消息后会触发客户端的receiveMsg事件，并将用户发送的消息作为参数传递，该事件会向聊天面板添加聊天内容，以下为chat-client.js代码

// 点击按钮或回车键发送消息
  $('#sub').click(sendMsg);
  $('#m').keyup((ev)=> {
   if(ev.which == 13) {
    sendMsg();
   }
  });

  // 接收消息
  socket.on('receiveMsg', (obj)=> { // 将接收到的消息渲染到面板上
   $('#messages').append(` 
     <li class='${obj.side}'>
     <img src="${obj.img}">
     <div>
      <span>${obj.name}</span>
      <p>${obj.msg}</p>
     </div>
    </li>
   `);
   // 滚动条总是在最底部
   $('#messages').scrollTop($('#messages')[0].scrollHeight);
  });


  // 发送消息
  function sendMsg() { 
   if($('#m').val() == '') { // 输入消息为空
    alert('请输入内容！');
    return false;
   }
   socket.emit('sendMsg', {
    msg: $('#m').val()
   });
   $('#m').val(''); 
   return false; 
  }

6、自定义字体颜色

得益于html5的input新特性，可以通过type为color的input调用系统调色板

<!-- $('#color').val();为选中颜色，格式为#FFCCBB -->
<input type='color' id='color'>

客户端根据用户选择的颜色渲染内容样式，代码很容易看懂，这里就不赘述了。

7、支持发送表情

发送表情其实很简单，将表情图片放在li中，当用户点击li时就将表情的src中的序号解析出来，用[emoji+表情序号]的格式存放在聊天框里，点击发送后再解析为src。就是一个解析加还原的过程，这一过程中我们的服务器代码不变，需要改变的是客户端监听的receiveMsg事件。

// chat-client.js

  // 显示表情选择面板
  $('#smile').click(()=> {
   $('.selectBox').css('display', "block");
  });
  $('#smile').dblclick((ev)=> { 
   $('.selectBox').css('display', "none");
  }); 
  $('#m').click(()=> {
   $('.selectBox').css('display', "none");
  });

  // 用户点击发送表情
  $('.emoji li img').click((ev)=> {
    ev = ev || window.event;
    var src = ev.target.src;
    var emoji = src.replace(/\D*/g, '').substr(6, 8); // 提取序号
    var old = $('#m').val(); // 用户输入的其他内容
    $('#m').val(old+'[emoji'+emoji+']');
    $('.selectBox').css('display', "none");
  });

客户端收到之后将表情序号还原为src，更改如下

// chat-client.js

  // 接收消息
  socket.on('receiveMsg', (obj)=> { 
   // 提取文字中的表情加以渲染
   var msg = obj.msg;
   var content = '';
   while(msg.indexOf('[') > -1) { // 其实更建议用正则将[]中的内容提取出来
    var start = msg.indexOf('[');
    var end = msg.indexOf(']');

    content += '<span>'+msg.substr(0, start)+'</span>';
    content += '<img src="image/emoji/emoji%20('+msg.substr(start+6, end-start-6)+').png">';
    msg = msg.substr(end+1, msg.length);
   }
   content += '<span>'+msg+'</span>';
   
   $('#messages').append(`
    <li class='${obj.side}'>
     <img src="${obj.img}">
     <div>
      <span>${obj.name}</span>
      <p style="color: ${obj.color};">${content}</p>
     </div>
    </li>
   `);
   // 滚动条总是在最底部
   $('#messages').scrollTop($('#messages')[0].scrollHeight);
  });

转载注明出处：http://www.heiqu.com/379.html

零基础实现node+express个性化聊天室的示例(4)

相关推荐