基于Node.js + WebSocket打造即时聊天程序嗨聊

io.on('connection', function(socket) {
//其他代码。。。

//接收新消息
socket.on('postMsg', function(msg) {
//将消息发送到除自己外的所有用户
socket.broadcast.emit('newMsg', socket.nickname, msg);
});
});

然后在客户端接收服务器发送的newMsg事件，并将聊天消息显示到页面。

将以下代码显示添加到hichat.js的init方法中了。

this.socket.on('newMsg', function(user, msg) {
  that._displayNewMsg(user, msg);
});

运行程序，现在可以发送聊天消息了。

 发送图片

上面已经实现了基本的聊天功能了，进一步，如果我们还想让用户可以发送图片，那程序便更加完美了。

图片不同于文字，但通过将图片转化为字符串形式后，便可以像发送普通文本消息一样发送图片了，只是在显示的时候将它还原为图片。

在这之前，我们已经将图片按钮在页面放好了，其实是一个文件类型的input，下面只需在它身上做功夫便可。

用户点击图片按钮后，弹出文件选择窗口供用户选择图片。之后我们可以在JavaScript代码中使用FileReader来将图片读取为base64格式的字符串形式进行发送。而base64格式的图片直接可以指定为图片的src，这样就可以将图片用img标签显示在页面了。

为此我们监听图片按钮的change事件，一但用户选择了图片，便显示到自己的屏幕上同时读取为文本发送到服务器。

将以下代码添加到hichat.js的init方法中。

www/scripts/hichat.js

document.getElementById('sendImage').addEventListener('change', function() {
  //检查是否有文件被选中
   if (this.files.length != 0) {
    //获取文件并用FileReader进行读取
     var file = this.files[0],
       reader = new FileReader();
     if (!reader) {
       that._displayNewMsg('system', '!your browser doesn't support fileReader', 'red');
       this.value = '';
       return;
     };
     reader.onload = function(e) {
      //读取成功，显示到页面并发送到服务器
       this.value = '';
       that.socket.emit('img', e.target.result);
       that._displayImage('me', e.target.result);
     };
     reader.readAsDataURL(file);
   };
 }, false);

 上面图片读取成功后，调用_displayNImage方法将图片显示在自己的屏幕同时向服务器发送了一个img事件，在server.js中，我们通过这个事件来接收并分发图片到每个用户。同时也意味着我们还要在前端写相应的代码来接收。

这个_displayNImage还没有实现，将会在下面介绍。