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

最新推荐文章于 2020-12-30 12:57:31 发布

Gib Gas!

最新推荐文章于 2020-12-30 12:57:31 发布

阅读量209

点赞数

分类专栏：前端学习文章标签： node.js html css javascript

本文链接：https://blog.csdn.net/weixin_44584059/article/details/107945451

版权

前端学习专栏收录该内容

60 篇文章 2 订阅

订阅专栏

铺垫一下基础知识，先把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.getElementById("sendTxt").value;
          if (txt) {
            websocket.send(txt);
          }
        };
        // document.getElementById("recv").innerHTML = "Connected";
        //  innerHTML 可以 获取 也可以 插入  //
      };
      ws.onclose = function () {
        // onclose 断开触发 //
        console.log("websocket close");
      };
      ws.onmessage = function (e) {
        // onmessage 接收到信息触发  //
        console.log(e.data);
        // document.getElementById("recv").innerHTML = e.data;
        // 添加函数，点击后添加div到对应位置
        showMessage(e.data);
      };
    </script>

修改wsServer.js的内容

var ws = require("nodejs-websocket")
var PORT = 8080
var clientCount = 0
var server = ws.createServer(function (conn) {
    //受到连接触发//
    console.log('new connection');
    // 客户端多1 加1
    clientCount++
    conn.nickname = 'user' + clientCount
    // 函数实现客户进入并通知
    broadcast(conn.nickname + '进入聊天室~')
    conn.on("text", function (str) {
        // 收到信息触发     接收 //
        console.log("received" + str)
        // conn.sendText(str) // 发送 数据 //
        // 提示客户进入
        broadcast(str)
    })
    conn.on("close", function (code, reason) {
        // 断开连接触发 //
        console.log("connection closed")
        // 提示客户离开
        broadcast(conn.nickname + '离开聊天室')
    })
    conn.on("error", function (err) {
        // 出错触发 //
        console.log("header err")
        console.log(err)
    })
}).listen(PORT)
console.log("websocket server listening on port" + PORT)

function broadcast(str) {
    // 遍历取到的所有链接用createServer方法
    server.connections.forEach(function (connection) {
        connection.sendText(str)
    })
}

在这里插入图片描述

Gib Gas!

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
回归前端学习第21天-实现俄罗斯方块小游戏2（深入了解Websocket~制作一个简易聊天室）

铺垫一下基础知识，先把Websocket以及socket.io都了解好，为后续做铺垫，所以今天在昨天的基础上，着手做一个聊天室实现一个简易聊天室利用websocket,实现用户进入后显示进入人数，退出时显示已经退出~实现一个简易聊天室利用websocket,实现用户进入后显示进入人数，退出时显示已经退出~在上一节的基础上，进行改动——点击发送后，将文本框的内容发送给server,接受数据后，再将数据通过div显示在界面，通过自建函数showMessage实现<body> <
复制链接

扫一扫