老师要求做一个仿探探的小程序项目，我很不幸的成为了混子小组里的一个不那么混的混子，然后恰逢假期，学习了一下nodejs上传图片并将相对路径保存到数据库，本以为完成这个就可以开摆，但我太天真了，几个老外比我还能摆，一放假就不知道迷失在了哪个窑子。只好再对聊天室，聊天功能小作研究，以下是我记录下的一些重点，以供大家参考。

websocket 实现简单的客户端与服务端连接

先放前端代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;border: 1px solid #000;}</style>
</head>
<body><input type="text" placeholder="输入你的内容"><button>发送请求</button><div></div><script>var input = document.querySelector('input')var button = document.querySelector('button')var div = document.querySelector('div')//演示websocket在浏览器如何使用// H5中已经提供了websocket的api 可以直接使用var socket = new WebSocket('ws://localhost:3000');//socket.addEventListener('open',function() {div.innerHTML = '连接服务成功'})button.addEventListener('click',function(){var value = input.valuesocket.send(value);  //发送给服务器})socket.addEventListener('message',function(e) {console.log(e.data)div.innerHTML = e.data})socket.addEventListener('close',function() {div.innerHTML = '服务断开链接'})</script>
</body>
</html>

后端代码：注意这里需要npm install nodejs-websocket

// 导入nodejs-websocket
const ws = require('nodejs-websocket')
const PORT = 3000// 创建一个server
// 每次只要有用户链接， 函数就会被执行，会给当前连接的用户创建一个connect对象
const server = ws.createServer(connect =>{console.log('由用户链接了')//每当接受到用户传递过来的数据，这个text事件会被触发connect.on('text',data=>{console.log('接受到数据：',data)//给用户一个响应的数据// 对用户发送过来的数据 可以直接进行处理connect.send(data)})connect.on('close',()=>{console.log('关闭链接')})connect.on('error',()=>{console.log('用户连接异常')})})server.listen(PORT,() =>{console.log('websocket 服务启动成功了 监听'+ PORT)
})

需要注意的是，在前端有这样的代码

   var socket = new WebSocket('ws://localhost:3000');

用处是实例化一个socket对象，让他监听括号里的服务端，而括号内的服务端地址时在后端代码中生成的，因为后端调用了app.listen(3000)

利用以上代码，我们可以做到每当有新的链接产生时，服务端都可以接收到“有新的用户连接了”，并且客户端会自动显示以与服务端连接成功，输入的消息都会直接显示在聊天框内，实际上，客户端发送的信息被服务端处理后返回，并显示在自己的聊天框内，大家可以动手试一下，新建文件夹，命令行输入npm init, 一直回车，然后npm install 相应组件即可，这里只用安装nodejs-websocket。

如果你已经试过了你就会发现，功能实现的太简单了，没有达到聊天室的效果，为此在改代码基础上做出改良版。也是直接放代码。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* div {width: 200px;height: 200px;border: 1px solid #000;} */</style>
</head>
<body><input type="text" placeholder="输入你的内容"><button>发送请求</button><div></div><script>var input = document.querySelector('input')var button = document.querySelector('button')var div = document.querySelector('div')const TYPE_ENTER = 0const TYPE_LEAVE = 1const TYPE_MSG = 2//演示websocket在浏览器如何使用// H5中已经提供了websocket的api 可以直接使用var socket = new WebSocket('ws://localhost:3000');//socket.addEventListener('open',function() {div.innerHTML = '连接服务成功'})button.addEventListener('click',function(){var value = input.valuesocket.send(value);  //发送给服务器input.value=''})socket.addEventListener('message',function(e) {// console.log(e.data)// var dv = document.createElement('div')// dv.innerText = e.data// div.appendChild(dv)var data = JSON.parse(e.data)var dv = document.createElement('div')dv.innerText = data.msg + '-----' + data.timeif(data.type === TYPE_ENTER) {dv.style.color = 'green'} else if(data.type === TYPE_LEAVE) {dv.style.color = 'red'} else {dv.style.color = 'blue'}div.appendChild(dv)})socket.addEventListener('close',function() {div.innerHTML = '服务断开链接'})</script>
</body>
</html>

后端：

const ws = require('nodejs-websocket');
const TYPE_ENTER = 0
const TYPE_LEAVE = 1
const TYPE_MSG = 2//记录当前连接上的用户登录
let count = 0
const server = ws.createServer(conn =>{console.log('新的连接')count++conn.userName = `用户${count}`broadcast({type: TYPE_ENTER,msg: `${conn.userName}进入了聊天室`,time: new Date().toLocaleDateString()})conn.on('text',data=>{//2. 当接收到某个用户信息是，发给所有人broadcast({type: TYPE_MSG,msg: data,time: new Date().toLocaleTimeString()})})conn.on('close',data=>{//3.有人退出 告诉所有人console.log('关闭连接')count--broadcast({type: TYPE_LEAVE,msg:`${conn.userName}离开了聊天室`,time: new Date().toLocaleTimeString()})})conn.on('error',data=>{console.log('发生异常')})})
// 广播 给所有人发消息
function broadcast(msg) {//server.connections : 表示所有的用户server.connections.forEach(item=>{item.send(JSON.stringify(msg))})
}server.listen(3000,()=>{console.log('监听端口3000')
})

以上的代码实现了广播功能，从而达到了聊天室的雏形，感兴趣的可以试一试，我这里直接放图片：

nodejs+websocket简易聊天室的学习相关推荐

一步一步教您用websocket+nodeJS搭建简易聊天室(4)
2019独角兽企业重金招聘Python工程师标准>>> 上节中带大家基于websoket与nodejs搭建了一个基本的聊天室雏形,实现了基本的聊天消息首发,用户状态显示,异常处理.但 ...
视频教程-基于Java的WebSocket的聊天室-Java
基于Java的WebSocket的聊天室多年 Java 企业级应用开发工作经验,曾参与中国人寿.华夏人寿.泰康人寿.信达财险等保险行业内部业务管理系统以及线上在线产品的开发:参与中国人民银行.清华大 ...
原创回归前端学习第21天-实现俄罗斯方块小游戏3（深入了解Websocket~优化简易聊天室）
对昨天的简易聊天室进行优化增加一个mes对象,将传送的数据放在对象里增加一个mes对象,将传送的数据放在对象里 wsServer.js中替换代码 broadcast(conn.nickname + ...
基于Node.js + WebSocket 的简易聊天室
代码地址如下: http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.j ...
Java WebSocket编程与网页简易聊天室
在webSocket还未引入前,许多开发人员通过各种非正规手段来完成更新网站的最新信息和到所有当前访问者的任务,其中一种手段就是通过浏览器向服务器轮询更新,但这种手段的网络延迟比较明显,其用户体验比较 ...
WebSocket原生JavaScript实现简易聊天室
WebSocket原生实现 WebSocket-Vue2 WebSocket-Vue3 基本介绍 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. Web ...
HTML5 之WebSocket入门demo和简易聊天室
HTML5 WebSocket WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. 在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏 ...
连夜撸了一个简易聊天室
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 分不清轮询.长轮询?不知道什么时候该用websocket还 ...
vue php聊天室,Laravel + Swoole 打造IM简易聊天室
Laravel + Swoole 打造IM简易聊天室最近在学习Swoole,利用Swoole扩展让PHP生动了不少,本篇就来Swoole开发一款简易的IM聊天室应用场景:实现简单的即时消息聊天室. ...

nodejs+websocket简易聊天室的学习

websocket 实现简单的客户端与服务端连接

nodejs+websocket简易聊天室的学习相关推荐

最新文章

热门文章