文章目录

前言

前端运用websocket打造的实时消息通知的聊天室，语言采用了JavaScript，可以进行登录系统，多用户实时聊天，后端服务器采用nodejs编写（我会把代码直接贴上）

代码是用最原生的js写的，如果利用框架例如vue，angular等，代码会变的更少更简洁

1、登陆页面

1.1 entry.html

<body>
  <input type="text" id="username" placeholder="请输入用户名" />
  <button id="enter">进入聊天室</button>

  <script src="./js/entry.js"></script>
</body>

1.2 entry.js

((doc, localStorage, location) => {
  const oUsername = doc.querySelector("#username");
  const oEnterBtn = doc.querySelector("#enter");

  const init = () => {
    bindEvent();  // 执行绑定事件
  };

  function bindEvent() {
    oEnterBtn.addEventListener("click", handleEnterBtnClick, false); // 给按钮添加点击事件
  }

  function handleEnterBtnClick() {
    const username = oUsername.value.trim(); // 去掉登录名的前后空格

    if (username.length < 6) {
      alert("用户名不小于6位");	// 登录名不能小于6位
      return;
    }
    
    localStorage.setItem("username", username);  // 把登录名存到localstorage里面
    location.href = "index.html";  // 跳转到聊天页面
  }

  init(); // 调用初始化函数
  
})(document, localStorage, location); // 立即执行函数

界面如下：

在这里插入图片描述
输入用户名进入到聊天室：
在这里插入图片描述
点击进入聊天室按钮：
在这里插入图片描述
下面继续说index这个聊天页面


2、聊天页面

2.1 index.html

<body>
    <ul id="list"></ul>   <!-- 这个ul标签是为了后面放置发送的消息列表的 -->
    <input type="text" id="message" placeholder="请输入消息">
    <button id="send">发送</button>

    <script src="./js/index.js"></script>
</body>

2.2 index.js

((document, WebSocket) => {
  const oList = document.querySelector("#list");
  const oMessage = document.querySelector("#message");
  const oSendBtn = document.querySelector("#send");

  // 协议是ws，不是http
  const ws = new WebSocket("ws:localhost:8000");
  // 新建WebSocket实例 因为我用nodejs写的服务器的地址是localhost:8000，如果大家开发的话，问后端要这个websocket地址即可。

  let username = "";

  const init = () => {
    bindEvent();
  };

  function bindEvent() {
    oSendBtn.addEventListener("click", handleSendBtnClick, false); // 给发送按钮绑定点击事件
    
    // 实例对象的onopen属性，用于指定连接成功后的回调函数。也就是open事件，也可以写作 ws.onopen = function () {}
    ws.addEventListener("open", handleOpen, false); 
    ws.addEventListener("close", handleClose, false); // 同上
    ws.addEventListener("error", handleError, false); // 同上
    // 实例对象的onmessage属性，用于指定收到服务器数据后的回调函数。
    ws.addEventListener("message", handleMessage, false); 
  }

  // 发送按钮的点击事件
  function handleSendBtnClick() {
    console.log("send message");

    const msg = oMessage.value; // 发送的内容（input框的value值）
    if (!msg.trim().length) {
      return;
    }

    // 实例对象的send()方法用于向服务器发送数据。
    ws.send(
	  // 应该发送字符串
      JSON.stringify({
        user: username,
        dateTime: new Date().getTime(),
        message: msg,
      })
    );

	// 发送完以后清空输入框
    oMessage.value = "";
  }

  function handleOpen(e) {
    console.log("Websocket open", e);
    // 获取登录时存放在localStorage的登录名
    username = localStorage.getItem("username");

	// 如果没找到登录名，则跳转到登录页面重新登录
    if (!username) {
      location.href = "entry.html";
    }
  }
  function handleClose(e) {
    console.log("Websocket close", e);
  }
  function handleError(e) {
    console.log("Websocket error", e);
  }
  function handleMessage(e) {
    console.log("Websocket message--收到消息了", e);
    const msgData = JSON.parse(e.data);
    // 向页面里的ul标签添加子节点
    oList.appendChild(createMsg(msgData));
  }

  // 消息的格式
  function createMsg(data) {
    const { user, dateTime, message } = data;
    const oItem = document.createElement("li");
    oItem.innerHTML = `
    <p>
    <span>${user}</span>
      <i>${new Date(dateTime)}</i>
      </p>
    <p>消息：${message}</p>
    `;
    return oItem;
  }

  init();
})(document, WebSocket); // WebSocket是window身上本身就有的

3、nodejs搭建的服务器

const Ws = require("ws");

((Ws) => {
  // ws:localhost:8000
  const server = new Ws.Server({ port: 8000 });

  const init = () => {
    bindEvent();
  };

  function bindEvent() {
    server.on("open", handleOpen);
    server.on("close", handleClose);
    server.on("error", handleError);
    server.on("connection", handleConnection);
  }

  function handleOpen() {
    console.log("Websocket open");
  }
  function handleClose() {
    console.log("Websocket close");
  }
  function handleError() {
    console.log("Websocket error");
  }
  function handleConnection(ws) {
    console.log("Websocket connected");
    ws.on("message", handleMessage);
  }
  function handleMessage(msg) {
    // 接受前端发送过来的message
    msg = msg.toString("utf-8");
    console.log("msg---", msg);

    // 把消息广播出去，凡是连接这个websocket地址的都能收到
    server.clients.forEach((c) => {
      c.send(msg);
    });
  }

  init();
})(Ws);

4、目录结构

在这里插入图片描述

5、实操结果


1、输入用户名登录进聊天室页面 （chrome浏览器标签页）

在这里插入图片描述
2、输入用户名登录进聊天室页面 （360浏览器标签页）
在这里插入图片描述

3、chrome的tom发送消息：

在这里插入图片描述
4、chrome的tom 和 360的jerry都可以收到消息：

在这里插入图片描述
在这里插入图片描述
5、360的Jerry发消息，两者也都能收到，自行尝试

# 前端 # websocket # javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue