前言

前端运用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，不是httpconst 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:8000const 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) {// 接受前端发送过来的messagemsg = 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打造实时聊天室相关推荐

SpringBoot 使用WebSocket打造在线聊天室（基于注解）
点击上方"好好学java",选择"置顶公众号" 优秀学习资源.干货第一时间送达! 精彩内容 java实战练习项目教程 2018微服务资源springboot.s ...
前端websocket实现简易聊天室
分为客户端和服务端,客户端就是一个简单的html页面,服务端使用node进行编写.具体代码如下 index.html <!DOCTYPE html> <html> <he ...
springboot+websocket+layui制作的实时聊天室，后端开发入门样例
实时聊天室前言效果图涉及技术 springboot layui websocket 实现思路 websocket在springboot下的实现前端实现建立websocket连接前端对应的w ...
基于Node.js + WebSocket 的简易聊天室
代码地址如下: http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.j ...
利用socket.io+nodejs打造简单聊天室
代码地址如下: http://www.demodashi.com/demo/11579.html 界面展示: 首先展示demo的结果界面,只是简单消息的发送和接收,包括发送文字和发送图片. ws说明: ...
SpringBoot +WebSocket实现简单聊天室功能实例
SpringBoot +WebSocket实现简单聊天室功能实例) 一.代码来源二.依赖下载三.数据库准备(sql) 数据库建表并插入sql 四.resources文件配置 application ...
Go 快速起步：创建 WebSocket 服务器（聊天室）
先了解 WebSocket 协议和 HTTP 协议一样,WebSocket 协议也建立在 TCP/IP 协议基础上,但不一样的是 HTTP 协议为单向协议,即只能客户端向服务器请求资源,服务器才 ...
java 聊天室开源_用java WebSocket做一个聊天室
最近一个项目中,需要用到Java的websocket新特性,于是就学了一下,感觉这技术还挺好玩的,瞬间知道网页上面的那些在线客服是怎么做的了. 先看图: 实现了多客户机进行实时通讯. 下面看代码项目结 ...
workerman-chat（PHP开发的基于Websocket协议的聊天室框架）（thinkphp也是支持socket聊天的）...
workerman-chat(PHP开发的基于Websocket协议的聊天室框架)(thinkphp也是支持socket聊天的) 一.总结 1.下面链接里面还有一个来聊的php聊天室源码可以学习 2. ...

前端websocket打造实时聊天室

文章目录

前言