回归前端学习第21天-实现俄罗斯方块小游戏2（深入了解Websocket~制作一个简易聊天室）-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44584059/article/details/107945451

铺垫一下基础知识，先把Websocket以及socket.io都了解好，为后续做铺垫，所以今天在昨天的基础上，着手做一个聊天室

实现一个简易聊天室
- 利用websocket,实现用户进入后显示进入人数，退出时显示已经退出~

实现一个简易聊天室

利用websocket,实现用户进入后显示进入人数，退出时显示已经退出~

在上一节的基础上，进行改动——点击发送后，将文本框的内容发送给server,接受数据后，再将数据通过div显示在界面，通过自建函数showMessage实现

<body>
    <h1>聊天室——Websocket</h1>
    <input type="text" id="sendTxt" />
    <button id="sendb">发送</button>
    <script type="text/javascript">
      var ws = new WebSocket("ws://localhost:8080/"); // 设置服务器地址 //
      // 添加div到页面
      function showMessage(str) {
        var div = document.createElement("div");
        div.innerHTML = str;
        document.body.appendChild(div);
      }
      ws.onopen = function () {
        // onopen 连接触发 //
        console.log("websocket open");
        document.getElementById("sendb").onclick = function () {
          var txt = document.getElementByI