Django上课笔记(六)——聊天功能的实现

也欢迎大家光临我另外项目课的其他博客：

大菜狗的项目博客目录 - AcWing

项目地址

https://git.acwing.com/codeRokie/acapp

解决之前的一些小bug

1.改变监听对象

之前大家在调试的时候应该也遇到这种情况：在一个页面放3个acapp时，按下键盘，三个窗口都有响应

这是因为我们之前监听键盘事件的对象是window,即整个浏览器窗口内。

我们应该把监听对象改为画布

在game/static/js/src/playground/player/zbase.js中：将$(window).keydown改为

this.playground.game_map.$canvas.keydown

2.让canvas可以监听输入事件

2.1.给canvas绑定一个属性：

在static/js/src/playground/game_map/zbase.js中：

this.$canvas = $(`<canvas tabindex=0></canvas>`);

2.2.为了能够让canvas获取输入信息，我们要将其聚焦：

在static/js/src/playground/game_map/zbase.js中：

    start() {
        this.$canvas.focus();
    }

聊天框的实现

实现一个聊天框类

在static/js/src/playground/chat_field/zbase.js下：

y总课上源代码

模块详解

视图部分

聊天框组件是由输入区域：

this.$input = $(`<input type="text" class="ac-game-chat-field-input">`);

和信息展示区域：

this.$history = $(`<div class="ac-game-chat-field-history">历史记录</div>`);

组成。

实现按回车呼出聊天框

1. 初始化时先将输入框隐藏
2. 监听键盘事件，当用户按下回车时，显示输入框并聚焦
3. 监听键盘事件，当用户按esc时，隐藏输入框，输入框并聚焦地图

在game/static/js/src/playground/player/zbase.js的add_listening_events()中实现对聊天模块的调用

if (e.which === 13) {  // enter
  if (outer.playground.mode === "multi mode") {
    // 打开聊天框
    outer.playground.chat_field.show_input();
    return false;
  }
} else if (e.which === 27) {  // esc
  if (outer.playground.mode === "multi mode") {
    // 关闭聊天框
    outer.playground.chat_field.hide_input();
  }
}

输入后按回车发送

1. 保存聊天输入框的输入的信息
2. 监听聊天输入框的键盘事件，按下回车后新建一个div元素把刚才输入的信息渲染到div中，并把div渲染到信息展示区域

在game/static/js/src/playground/chat_fild/zbase.js的add_listening_events()

add_listening_events() {
  let outer = this;

  this.$input.keydown(function (e) {
    if (e.which === 27) {  // ESC
      outer.hide_input();
      return false;
    } else if (e.which === 13) {  // ENTER
      //获取输入区域输入的内容
      let text = outer.$input.val();
      if (text) {
        let username = outer.playground.root.settings.username;
        //先清空输入框
        outer.$input.val("");
        //再把输入框中的消息展示到信息展示区
        outer.add_message(username, text);
        outer.playground.mps.send_message(username, text);
      }else {
        outer.hide_input();
        return false;
      }
      return false;
    }
  });
}

让信息可以从上到下依次渲染

add_message(username, text) {
this.show_history();
let message = `[${username}]${text}`;
this.$history.append(this.render_message(message));
this.$history.scrollTop(this.$history[0].scrollHeight);
}