socket.io双向、实时和基于事件的对话机制2

结合所学，下面我做的机器人聊天小案例部分核心代码：

/**************在www启动文件下进行编译****************/
/*
  聊天对话机制处理
*/
//1.导包
let socketPackage = require("socket.io");
//2.实例化对象 并监听服务器
let io = socketPackage(server);   //server已在Express生成器执行过程中创建

//3.建立连接   需要客户端与服务器端建立通话机制后，才能连接
io.on("connection",(socket)=>{
  console.log("连接成功");
  //通过emit()方法向客户端输出
  socket.emit("msg","欢迎你来找我聊天，我将给你带来无限的乐趣")

  //监听客户端传来的消息
  socket.on("msg",(data)=>{  //绑定msg消息事件，客户端传递过来的数据data
    // console.log(data);
    //获取对应的回话
    let msg = getMsg(data);
    // console.log(msg);
    //将回话输出到客户端
    socket.emit("msg",msg);
  })
  
  //监听连接关闭
  socket.on("disconnect",()=>{
    console.log("连接已关闭");
  })
});

//机器回话机制
let getMsg = function (data) {
  let msg = '';
  switch (data) {
    case "你好":
      msg = "你好呀，见到你很高兴";
      break;
    case "在":
      msg = "在的，小强时时刻刻都在，时刻在准备着陪客官大人聊嗨";
      break;
   default:
      msg = "系统加急完善中，请耐心等待...";
      break;
  }
  return msg;
}

.ejs 文件中的核心代码：

<script>
  // 处理对话机制
  // 1. 建立连接
  let url = "127.0.0.1:3000";
  let socket = io.connect(url);  //表示拿到socket中的io对象来连接上URL地址

  //下面的时间均由socket实例对象来实现
  // 2. 监听
  socket.on("connect",()=>{
    console.log("已经建立了连接");
    //打开通道
    socket.emit("open");   //通过emit来提交一个打开事件
  });

  //监听服务器端传递过来的数据
  socket.on("msg",(data)=>{
    // console.log(data);
    //将数据写到ul中
    writeDownMsg("server",data);
  });

  //向服务端传递消息
  $("#send_btn").on("click",function () {
    addCustomData();
  })

  //回车后发送消息
  $(window).on("keydown",function (event) {
    // console.log(event.keyCode);
    if(event.keyCode === 13){
      addCustomData();
      event.preventDefault();   //取消回车的默认事件，点击后文本回车
      // event.stopPropagation();    取消冒泡事件
    }
  });

  function addCustomData() {
    let data = $("#content").val();
    // console.log(data);
    if(!data){
      $("#container #right .content .arrow").css({"display":"block"});
      $("#container #right .content .tip").css({"display":"block"});
      setTimeout(()=>{
        $("#container #right .content .arrow").css({"display":"none"});
        $("#container #right .content .tip").css({"display":"none"});
      },2000);
      return;
    }
    // console.log(data);
    socket.emit("msg",data);   //将数据传递给服务器

    //将输入的内容放到ul中
    writeDownMsg("custom",data);

    //将输入框清空
    $("#content").val('');

  }
  
  //处理产生的数据,插入到ul中
  function writeDownMsg(className,data) {
    let $liDom = $("<li>");
    $liDom.attr({"class":className});

    let $spanDom  = $("<span>");
    $spanDom.text(data);

    $liDom.append($spanDom);

    $("#contents").append($liDom);

    //让滚动条一直处于最下方
    // console.log($(".body")[0].scrollHeight);
    // let scrollHeight = $(".body")[0].scrollHeight;
    $('#container #right .mCustomScrollbar').mCustomScrollbar('scrollTo',"bottom");
  }

</script>

注意：使用到了jquer插件库
http://manos.malihu.gr/jquery-custom-content-scroller/#expand-info

简单效果如下；