websocket + node 手把手实现简陋聊天室 |
您所在的位置：网站首页 › 链接怎么制作成文件格式发送 › websocket + node 手把手实现简陋聊天室 |
websocket + node 手把手实现简陋聊天室
|
在这一篇文章中，我将会先对 websocket 做一个简单的介绍；然后使用 node + websocket 做一个极其简陋的聊天室；最后在将这个简陋的聊天室通过 websocket 框架 —— socket.io 进行制作。 1、认识 websocket ① 什么是 websocketHTML5 开始提供的一种浏览器与服务器进行全双工通讯的网络技术，属于应用层协议。它基于 TCP 传输协议，并复用 HTTP 的握手通道。 Websocket 是一种自然的全双工、双向、单套接字连接。解决了 HTTP 协议中不适合于实时通信的不足。2008 年被提出，2011 年成为国际标准。 Websocket 协议能够通过 Web 进行客户端和服务器之间的全双工通信，并支持二进制数据和文本字符串的传输。 这个协议由开始的握手和之后的基本消息框架组成，是建立在 TCP 协议上的。 相比于 HTTP 协议，Websocket 链接一旦建立，即可进行双向的实时通信； 下面一幅图是 HTTP 建立连接与 websocket 建立连接的流程图 Server-sent Events（SSE）： www.ruanyifeng.com/blog/2017/0… www.cnblogs.com/goloving/p/… SPDY （读作“SPeeDY”）： 已不再维护，由 HTTP/2 取代 baike.baidu.com/item/SPDY/3… WebRTC baike.baidu.com/item/WebRTC… WebRTC 估计很多人都不会陌生，websocket 一般适用于文本的实时通信，而音视频的通信一般使用的是 WebRTC 技术 2、直接上手 ① 使用浏览器 + websocket + node 做一个简单的聊天室其实 websocket 的技术还是有不少理论性的知识，因为比较偏网络方面，会比较枯燥，有兴趣的可以去搜一下相关的知识。现在我将要直接带各位实战了。 Ⅰ. 服务端第一步：创建一个空文件夹，然后使用 npm init -y 初始化整个文件夹 安装 websocket：npm install websocket，websocket 的 npm 包的网址：www.npmjs.com/package/web… 在目录中创建一个文件，命名为 server.js 首先需要引入 websocket，很重要的一点：需要再引入 http 模块，因为 websocket 是基于 http 协议的 const websocket = require('websocket').server const http = require('http')然后启动 http，开启服务器，进行监听 const httpServer = http.createServer().listen(8080, ()=>{ console.log('nihao: ','http://localhost:8080'); })创建 websocket 服务，这里面有两个必填的参数 const websocketServer = new websocket({ httpServer: httpServer, autoAcceptConnections: false })创建通信线池，如果不适使用数据库的话，需要用数组来做一个虚拟的线池，因为 websocket 是一个实时通信的，服务器与客户端之间的通信是有来有回的，需要将这些通信的数据进行存储。一般使用 redis 来做线池，然后上限存储的数据数量一般是 1000 条 const conArr = []使用 websocket 来接受请求和发送消息，这里用到的是 websocket 的 npm 包中的 .on('requset', function(){}) 方法和 .on('message', function() {} 方法。这些方法的使用都可以从 websocket 的 npm 文档中查看，或者是从 github 上面查看 websocketServer.on('request', function(request) { // 这就是一次客户端发送的消息 // websocket 需要将这个链接保存起来 // 只要客户端和服务器没有断开，这个链接必须在 // 客户端与服务端的通信都是从这个链接上通信 const connection = request.accept() // 每次接收一个链接，将它存放在数组里面 conArr.push(connection) // 监听客户端发送的消息 connection.on('message', function(message) { console.log(message); // 发送消息给客户端（广播到各个客户端） // 后面加上 utf8Data 编码 // 要将所有的链接全部发出去，才可以让每个客户端接收到其他传来的数据 for(let i = 0; i < conArr.length; i++) { conArr[i].send(message.utf8Data) } }) })最后启动服务器就可以：node server.js 在文件夹中创建一个 index.html 文件，先编写一个简陋的 HTML 页面 输入姓名： 输入消息： 点击发送消息先通过 js 获取到页面中的节点，都时候通过这些节点进行一系列的操作 // 用户名 const uName = document.getElementById('uName') // 文本框内容 const context = document.getElementById('context') // 点击按钮 const btn = document.getElementById('btn') // 要显示聊天室的区域 const charRoom = document.getElementById('charRoom')注意，因为在浏览器中自带 websocket，所以直接通过 new 实例化 websocket 对象就行，并不需要下载或者引入什么东西。 这里会用到浏览器中 websocket 自己的方法：websocket.onopen，websocket 的各种方法都可以从 MDN 文档中查看到：developer.mozilla.org/zh-CN/docs/… // 实例化 websocket // 必须加 'ws://localhost:8080' ws 协议，后面是开启的服务端接口 const websocket = new WebSocket('ws://localhost:8080') // 打开事件 websocket.onopen = function() { // 获取当前链接的状态 // 1 是建立了链接 console.log(websocket.readyState); }创建一个按钮点击事件，通过这个事件通过 websocket 向服务器发送数据，向服务器发送数据需要通过 websocket 的 websocket.onmessage 方法进行消息的传送，这个方法有一个参数，参数就是自己要发送的 data 数据。但是注意，因为自己从页面中获取到的数据都不是 JSON 对象格式，在发送数据之前，需要将数据转换为 JSON 对象格式。 // 点击发送消息的事件 btn.onclick = function() { // 将用户名和要发送的内容放在一个对象中，一起传送给后端 const values = { uName: uName.value, context: context.value } // 清空文本框的内容 uName.value = '' context.value = '' // 通过 websockte 发送消息 websocket.send(JSON.stringify(values)) }最后是让浏览器实时监听服务器传递过来的消息，需要通过 websocket 的 websocket.onmessage 方法获取服务器发送的消息。这里我通过模板字符串的形式，对文本内容进行拼接处理。 // 接收服务器返回的消息 websocket.onmessage = function(data) { // 服务器返回过来的聊天信息 const chatS = JSON.parse(data.data) // 添加到页面上 charRoom.innerHTML += ` ${chatS.uName}： ${chatS.context} ` } Ⅲ. 效果查看 这个时候打开浏览器，就可以实现客户端之间的实时通信了。因为要查看客户端之间的实时通信，那么可以打开多个浏览器来查看效果： server.js 服务器的完整代码 const websocket = require('websocket').server const http = require('http') const httpServer = http.createServer().listen(8080, ()=>{ console.log('nihao: ','http://localhost:8080'); }) // 创建 websocket 服务器 const websocketServer = new websocket({ httpServer: httpServer, autoAcceptConnections: false }) // 链接池，一般真实场景会用缓存做链接池 redis 一般一个链接池的上限是 1000 // 存储链接 // 但是有一个最大上限 const conArr = [] websocketServer.on('request', function(request) { // 这就是一次客户端发送的消息 // websocket 需要将这个链接保存起来 // 只要客户端和服务器没有断开，这个链接必须在 // 客户端与服务端的通信都是从这个链接上通信 const connection = request.accept() // 每次接收一个链接，将它存放在数组里面 conArr.push(connection) // 监听客户端发送的消息 connection.on('message', function(message) { console.log(message); // 发送消息给客户端（广播到各个客户端） // 后面加上 utf8Data 编码 // 要将所有的链接全部发出去，才可以让每个客户端接收到其他传来的数据 for(let i = 0; i < conArr.length; i++) { conArr[i].send(message.utf8Data) } }) // 客户端断开连接，服务器会触发 // connection.on('close') })index.html 客户端的完整代码 Document 输入姓名： 输入消息： 点击发送消息 // 用户名 const uName = document.getElementById('uName') // 文本框内容 const context = document.getElementById('context') // 点击按钮 const btn = document.getElementById('btn') // 要显示聊天室的区域 const charRoom = document.getElementById('charRoom') // 实例化 websocket // 必须加 'ws://localhost:8080' ws 协议，后面是开启的服务端接口 const websocket = new WebSocket('ws://localhost:8080') // 打开事件 websocket.onopen = function() { // 获取当前链接的状态 // 1 是建立了链接 console.log(websocket.readyState); } // 点击发送消息的事件 btn.onclick = function() { // 将用户名和要发送的内容放在一个对象中，一起传送给后端 const values = { uName: uName.value, context: context.value } // 清空文本框的内容 uName.value = '' context.value = '' // 通过 websockte 发送消息 websocket.send(JSON.stringify(values)) } // 接收服务器返回的消息 websocket.onmessage = function(data) { // 服务器返回过来的聊天信息 const chatS = JSON.parse(data.data) // 添加到页面上 charRoom.innerHTML += ` ${chatS.uName}： ${chatS.context} ` } // 服务器断开连接，客户端会触发 // websocket.onclose = function() {} ② 使用 socket.io 框架制作一个聊天框socket.io 对 websocket 做了很完整的封装，核心代码只需要几步就可以完成了，具体的步骤我不会再向上面那么详细的介绍，这里我直接给各位完整的代码，可以结合我的注释来食用。当然最好的学习途径肯定是官网文档了：socket.io/docs/v4/ server.js 服务端的完整代码 // socket.io 框架 // 引入 http 模块的 createServer 方法 const { createServer } = require('http') // 引入 socket.io 的 Server 模块 const { Server } = require('socket.io') // 实例化 httpServer const httpServer = createServer(); // 初始化 socket.io const io = new Server(httpServer, { cors: { origin: '*', methods: ['GET', 'POST'] } }) // 使用 socket.io 来建立连接 io.on('connection', socket => { socket.on('sendMsg', data => { io.emit('pushMsg', data) console.log(data); }) }) // 创建服务器，进行监听 httpServer.listen(8080, function() { console.log('http://localhost:8080'); })客户端的完整代码 注意客户端这里，因为是要使用 scoket.io 框架，必须先要引入。官网上有多种引入方式，通过 CDN 引入或者是直接下载到本地进行引入。 Document 输入姓名： 输入消息： 点击发送消息 // 用户名 const uName = document.getElementById('uName') // 文本框内容 const context = document.getElementById('context') // 点击按钮 const btn = document.getElementById('btn') // 要显示聊天室的区域 const charRoom = document.getElementById('charRoom') // 使用 socket.io 框架与服务器相连接 const socket = io.connect('http://localhost:8080') // 点击发送消息的事件 btn.onclick = function() { // 将用户名和要发送的内容放在一个对象中，一起传送给后端 const values = { uName: uName.value, context: context.value } // 清空文本框的内容 uName.value = '' context.value = '' // 通过 socket.io 框架向服务器发送数据 socket.emit('sendMsg', values) } // 使用 socket.on 方法监听服务端发送过来的数据 socket.on('pushMsg', data => { // 添加到页面上 charRoom.innerHTML += ` ${data.uName}： ${data.context} ` })也附上一个效果图吧：
|
【本文地址】
今日新闻 |
推荐新闻 |