这篇文章主要介绍了如何使用 webSocket、Node 和 Js 实现在线聊天功能。 重要亮点
💻 技术选型：使用 Node.js 搭建服务器，利用 Express 框架和 Socket.io 库实现 WebSocket 通信。
📄 实现思路：通过建立数组存储聊天记录，在页面加载时发送连接请求，发送消息时广播给其他用户，前端使用 JQ 操作 DOM。
✍ 代码示例：提供了完整的代码示例，包括服务器端和客户端的实现。
视频地址：https://live.csdn.net/v/embed/392116
一、首先我们需要创建一个index.js，写有关于node服务的逻辑代码，其中使用了express和socket。
二、这个时候，我们的node服务已经搭建好了，socket服务也启动了。
1、socket使用很简单
2、我们声明一个数组用来保存当前所有的聊天记录
3、首次进入页面的时候会主动发送socket信息
4、当我们发送消息的时候，其他人也可以收到对应的消息
5、前端使用了JQ用来操作dom,使用在线的socket连接后端的端口地址
三、输入用户名、输入要发送的文字、直接发送即可
四、对应代码
index.js
const express = require('express') // const path = require('path') const app = express() let port = 3333 // app.use(express.static(path.join(__dirname, 'public'))); // app.get('/', (req, res, next) => { // res.writeHead(200, { 'Content-type': 'text/html;charset=utf-8' }) // // res.end('欢迎来到express') // next() // }) const server = app.listen(port, () => { console.log('成功启动express服务,端口号是' + port) }) //引入socket.io传入服务器对象 让socket.io注入到web网页服务 const io = require('socket.io')(server); let arr = [{ user:'系统消息', info:'恭喜链接websocket服务成功......' }] io.on('connect', (websocketObj) => { //connect 固定的 console.log("====================") //链接成功后立即触发webEvent事件 websocketObj.emit('webEvent', JSON.stringify(arr)); //监听前端触发的 sendFunEvent 事件 websocketObj.on('sendFunEvent', (webres) => { console.log(webres, 'webreswebres') arr.push(webres) //触发所以的 sendFunEventCallBack 事件 让前端监听 io.sockets.emit("sendFunEventCallBack", JSON.stringify(arr)); }) })
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 通过script的方式引入 soctke.io --> <!-- //不成功就使用最新版本的 直接百度 cdn socket.io --> <script crossorigin="anonymous" integrity="sha512-xbQU0+iHqhVt7VIXi6vBJKPh3IQBF5B84sSHdjKiSccyX/1ZI7Vnkt2/8y8uruj63/DVmCxfUNohPNruthTEQA==" src="https://lib.baomitu.com/socket.io/4.6.1/socket.io.js"></script> <!-- 为了操作dom方便我也引入了jq --> <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> <title>myWebsocket</title> <style> body { position: relative; } .zzzz { position: fixed; top: 20px; left: 20px; } .myBoxChild{ margin-top: 60px; } .aaa{ padding-left: 30px; } </style> </head> <body> <div class="myBox"> <div class="zzzz"> <input class="name" placeholder="用户名" type="text"> <input class="inp" placeholder="请输入" type="text"> <button onclick="sendFun()">发送</button> </div> <div class="myBoxChild"></div> </div> <script> //页面打开自动链接 http://localhost:3000 后端服务 let mySocket = io("http://127.0.0.1:3333") //直接写后端服务地址 //一直在监听webEvent 这个事件 mySocket.on('webEvent', (res) => { window.alert(JSON.parse(res)[0].info) }) mySocket.on('sendFunEventCallBack', (res) => { console.log(res, 'sendFunEventCallBackRes') let data = JSON.parse(res) let str = '' for (let i = 0; i < data.length; i++) { str += `<p class="aaa">${data[i].user}: ${data[i].info}</p>` } $('.myBoxChild')[0].innerHTML = str }) //获取input的输入内容//将来传给服务器 function sendFun() { if ($('.myBox .inp').val() != '') { mySocket.emit('sendFunEvent', { info:$('.myBox .inp').val(), user:$('.myBox .name').val() }) setTimeout(() => { $('.myBox .inp').val('') }) } else { alert('输入字符') return } } </script> </body> </html>
全部代码：
