[网络协议] websocket搭建简易的聊天室--勿喷

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 网络协议 -> websocket搭建简易的聊天室--勿喷 -> 正文阅读

[网络协议]websocket搭建简易的聊天室--勿喷

因为本人做了信息的存储所以还用到的mysql，如果不做存储的话只能吧相应的代码注释即可。

node初始化 npm init 安装以下两个依赖

"mysql": "^2.18.1",
"nodejs-websocket": "^1.7.2"

建立一个app.js

var ws = require("nodejs-websocket");
console.log("开始建立连接...")


var mysql = require('mysql');
console.log('开始连接数据库.....');
var connection = mysql.createConnection({
  host: '127.0.0.1',
  user: 'root',
  password: '123456',
  database: 'socker',
  port: '3306'
});
connection.connect();
console.log('连接数据库成功!');

var [user1, user2, user1Ready, user2Ready] = [null, null, false, false];
var count1 = 0
var count2 = 0

ws.createServer(function (conn) {
  conn.on("text", function (str) {
    console.log("收到的信息为:" + str)

    var obj = {}
    if (str.indexOf('mes') != -1) {
      obj = JSON.parse(str)
    }

    if (str === "user1") {
      user1 = conn;
      user1Ready = true;
    }
    if (str === "user2") {
      user2 = conn;
      user2Ready = true;
    }


    if (user2Ready) {
      // 查历史记录
      if (count2 == 0) {
        count2++
        let sql = 'SELECT * FROM message';
        connection.query(sql, function (err, result) {
          if (err) {
            console.log('[SELECT ERROR] - ', err.message);
            return;
          }

          console.log('--------------------------SELECT2222222222----------------------------');
          console.log(result);
          console.log('------------------------------------------------------------\n\n');
          for (let i in result) {
            let user = new String(result[i].user)
            let msg = new String(result[i].message)
            let defaultObj = { name: user, mes: msg }
            user2.sendText(JSON.stringify(defaultObj));
          }
        });
      } else {
        user2.sendText(str);
      }
    }

    if (user1Ready) {
      // 查历史记录
      if (count1 == 0) {
        count1++
        let sql = 'SELECT * FROM message';
        connection.query(sql, function (err, result) {
          if (err) {
            console.log('[SELECT ERROR] - ', err.message);
            return;
          }

          console.log('--------------------------SELECT11111111111----------------------------');
          console.log(result);
          console.log('------------------------------------------------------------\n\n');
          for (let i in result) {
            let user = new String(result[i].user)
            let msg = new String(result[i].message)
            let defaultObj = { name: user, mes: msg }
            user1.sendText(JSON.stringify(defaultObj));
          }
        });
      } else {
        user1.sendText(str);
      }
    }



    // 数据库存谁发的信息
    if (user1Ready && user2Ready) {
      if (str.indexOf('mes') != -1) {
        mysqlMessage(obj.name, obj.mes)
      }
    }
  })
  conn.on("close", function (code, reason) {
    connection.end();
    console.log("关闭连接")
  });
  conn.on("error", function (code, reason) {
    connection.end();
    console.log("异常关闭")
  });
}).listen(8001)


// 插入数据库数据
function mysqlMessage (name, message) {
  var addSql = 'INSERT INTO message(id,message,user) VALUES(0,?,?)';
  var addSqlParams = [message, name];
  connection.query(addSql, addSqlParams, function (err, result) {
    if (err) {
      console.log('[INSERT ERROR] - ', err.message);
      return;
    }

    console.log('--------------------------INSERT----------------------------');
    console.log('INSERT ID:', result);
    console.log('-----------------------------------------------------------------\n\n');
  });

}
console.log("WebSocket建立完毕")

建立两个页面

user1.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>user1</title>
  <style>
    #mes {
      width: 300px;
      height: 300px;
      border: 1px solid #666;
      overflow: auto;
      margin-bottom: 10px;
      padding: 5px;
    }

    li {
      text-decoration: none;
      background: #f4f4f4;
      padding: 5px;
      margin-top: 5px;
    }

    .tl {
      color: red;
      text-align: left;
    }

    .tr {
      color: green;
      text-align: right;
    }
  </style>
</head>

<body>
  <ul id="mes"></ul>
  <div class="kuang">
    <input type="text" value="" class="int">
    <button class="send">发送</button>
  </div>
  <script>
    var mes = document.getElementById("mes");
    if (window.WebSocket) {
      var ws = new WebSocket('ws://localhost:8001');

      ws.onopen = function (e) {
        console.log("连接服务器成功");
        ws.send("user1");
      }

      ws.onmessage = function (e) {
        console.log(e);
        if (e.data !== "user1" && e.data !== "user2") {
          console.log(e);
          var newData = JSON.parse(e.data);
          var node = document.createElement("LI");
          var textnode = document.createTextNode(newData.mes);
          node.appendChild(textnode);
          if (newData.name === "user2") {
            node.classList.add("tl")
            mes.appendChild(node);
          } else {
            node.classList.add("tr")
            mes.appendChild(node);
          }
        }
        document.querySelector(".send").onclick = function (e) {
          var obj = {
            name: "user1",
            mes: document.querySelector(".int").value
          }
          ws.send(JSON.stringify(obj));
          document.querySelector(".int").value = "";
        }
        // 回车事件
        document.onkeydown = function (event) {
          var e = event || window.event || arguments.callee.caller.arguments[0];
          if (e && e.keyCode == 13) { // enter 键
            var obj = {
              name: "user1",
              mes: document.querySelector(".int").value
            }
            ws.send(JSON.stringify(obj));
            document.querySelector(".int").value = "";
          }
        }

        ws.onclose = function (e) {
          console.log("服务器关闭");
        }

        ws.onerror = function () {
          console.log("连接出错");
        }
      }
    }
  </script>
</body>

</html>

user2.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>user2</title>
  <style>
    #mes {
      width: 300px;
      height: 300px;
      border: 1px solid #666;
      overflow: auto;
      margin-bottom: 10px;
      padding: 5px;
    }

    li {
      text-decoration: none;
      background: #f4f4f4;
      padding: 5px;
      margin-top: 5px;
    }

    .tl {
      color: red;
      text-align: left;
    }

    .tr {
      color: green;
      text-align: right;
    }
  </style>
</head>

<body>
  <ul id="mes"></ul>
  <div class="kuang">
    <input type="text" value="" class="int">
    <button class="send">发送</button>
  </div>
  <script>
    var mes = document.getElementById("mes");
    if (window.WebSocket) {
      var ws = new WebSocket('ws://10.238.91.55:8001');
      ws.onopen = function (e) {
        console.log("连接服务器成功");
        ws.send("user2");
      }

      ws.onmessage = function (e) {
        if (e.data !== "user1" && e.data !== "user2") {
          console.log(e);
          var newData = JSON.parse(e.data);
          var node = document.createElement("LI");
          var textnode = document.createTextNode(newData.mes);
          node.appendChild(textnode);
          if (newData.name === "user1") {
            node.classList.add("tl")
            mes.appendChild(node);
          } else {
            node.classList.add("tr")
            mes.appendChild(node);
          }
        }
        document.querySelector(".send").onclick = function (e) {
          var obj = {
            name: "user2",
            mes: document.querySelector(".int").value
          }
          ws.send(JSON.stringify(obj));
          document.querySelector(".int").value = "";
        }
        // 回车事件
        document.onkeydown = function (event) {
          var e = event || window.event || arguments.callee.caller.arguments[0];
          if (e && e.keyCode == 13) { // enter 键
            var obj = {
              name: "user2",
              mes: document.querySelector(".int").value
            }
            ws.send(JSON.stringify(obj));
            document.querySelector(".int").value = "";
          }
        }
      }

      ws.onclose = function (e) {
        console.log("服务器关闭");
      }

      ws.onerror = function () {
        console.log("连接出错");
      }
    }
  </script>
</body>

</html>