Node.js 教程第十三篇——WebSocket
重温 HTTP 协议
HTTP 协议可以总结几个特点:
- 一次性的、无状态的短连接:客户端发起请求、服务端响应、结束。
- 被动性响应:只有当客户端请求时才被执行,给予响应,不能主动向客户端发起响应。
- 信息安全性:得在服务器添加 SSL 证书,访问时用 HTTPS。
- 跨域:服务器默认不支持跨域,可在服务端设置支持跨域的代码或对应的配置。
认识 TCP
TCP 协议可以总结几个特点:
- 有状态的长连接:客户端发起连接请求,服务端响应并建立连接,连接会一直保持直到一方主动断开。
- 主动性:建立起与客户端的连接后,服务端可主动向客户端发起调用。
- 信息安全性:同样可以使用 SSL 证书进行信息加密,访问时用 WSS 。
- 跨域:默认支持跨域。
认识 WebSocket
WebSocket 目前由 W3C 进行标准化。WebSocket 已经受到 Firefox 4、Chrome 4、Opera 10.70 以及Safari 5 等浏览器的支持。
如果在前端我们可以把 AJAX 请求当作一个 HTTP 协议的实现,那么,WebSocket 就是 TCP 协议的一种实现。
服务端 API
- 安装第三方模块 ws:
npm install ws
- 开启一个 WebSocket 的服务器,端口为 8080
var socketServer = require('ws').Server;
var wss = new socketServer({port: 8080
});
- 也可以利用 Express 来开启 WebSocket 的服务器
var app = require('express')();
var server = require('http').Server(app);var socketServer = require('ws').Server;
var wss = new socketServer({server: server, port: 8080});
- 用 on 来进行事件监听
- connection:连接监听,当客户端连接到服务端时触发该事件
- close:连接断开监听,当客户端断开与服务器的连接时触发
- message:消息接受监听,当客户端向服务端发送信息时触发该事件
- send: 向客户端推送信息
wss.on('connection', function (client) {client.on('message', function (_message) {var _messageObj = JSON.parse(_message);//status = 1 表示正常聊天_messageObj.status = 1;this.message = _messageObj;//把客户端的消息广播给所有在线的用户wss.broadcast(_messageObj);});// 退出聊天 client.on('close', function() { try{this.message = this.message || {};// status = 0 表示退出聊天this.message.status = 0;//把客户端的消息广播给所有在线的用户wss.broadcast(this.message); }catch(e){ console.log('刷新页面了'); } });
});//定义广播方法
wss.broadcast = function broadcast(_messageObj) { wss.clients.forEach(function(client) { client.send(JSON.stringify(_messageObj))});
};
客户端 API
- 在支持 WebSocket 的浏览器下实例化 WebSocket ,参数为 WebSocket 服务器地址,建立与服务器的连接
if(!WebSocket){$('.connState').text("您的浏览器不支持WebSocket");return false;
}
//连接 socket 服务器
var socket = new WebSocket('ws://localhost:8080');
- onopen:当网络连接建立时触发该事件
//监听 socket 的连接
socket.onopen = function(){$('.connState').text("服务已连接 ws://localhost:8080");
}
- onclose:当服务端关闭时触发该事件
//监听服务端断开
socket.onclose = function(){$('.connState').text("服务已断开");socket = null;
}
- close: 在客户端断开与服务端的连接
socket.close();
- onerror:当网络发生错误时触发该事件
//监听服务端异常
socket.onerror = function(){$('.connState').text("服务错误");socket = null;
}
- onmessage:当接收到服务器发来的消息的时触发的事件,也是通信中最重要的一个监听事件
//监听服务端广播过来的消息
socket.onmessage = function(msg){var msgObj = JSON.parse(msg.data);if(msgObj.status == 0){$('<p>' + msgObj.nickname + '[' + msgObj.time + ']退出聊天</p>').appendTo('.msgList');} else{$('<p>' + msgObj.nickname + '[' + msgObj.time + ']:' + msgObj.message + '</p>').appendTo('.msgList');}
}
- send:向服务端推送消息
var sendMessage = function(_mess){if(socket){var myDate = new Date();var now = myDate.getMonth() + '-' + myDate.getDate() + ' ' + myDate.getHours() + ':' + myDate.getMinutes() + ':' + myDate.getSeconds(); var mesObj = {nickname: $('#nickName').val(),message: _mess || $('#mesBox').val(),time: now}//向服务端发送消息socket.send(JSON.stringify(mesObj));}
}
项目应用
该案例是一个多人聊天室
运行步骤
- npm install ws
- node socketServer
案例思路
- 服务端开户一个服务
new socketServer({port: 8080});
- 客户端建立和服务端的连接
var socket = new WebSocket('ws://localhost:8080');
- 建立连接的同时发送上线信息给服务端
socket.send('加入聊天');
- 服务端接受到客户端的消息触发 message 方法,然后将该消息广播给所有在线的用户
- 所有客户端收到来自服务端广播的消息,然后将该消息显示在聊天列表。
- 聊天和退出聊天都是重复着客户端发送消息,服务端接受消息然后向客户端广播消息,客户端显示广播消息。
Node.js 教程第十三篇——WebSocket相关推荐
- 如何用 Node.js 实现一个简单的 Websocket 服务?
最近正在研究 Websocket 相关的知识,想着如何能自己实现 Websocket 协议.到网上搜罗了一番资料后用 Node.js 实现该协议,倒也没有想象中那么复杂,除去注释语句和 console ...
- 10+ 最佳的 Node.js 教程和实例
如果你正在找Node.js的学习资料及指南,那么请继续(阅读),我们的教程将会覆盖即时聊天应用.API服务编写.投票问卷应用.人物投票APP.社交授权. Node.js on Raspberry Pi ...
- JavaScript - Node.JS教程系列-李游Leo-专题视频课程
JavaScript - Node.JS教程系列-147人已学习 课程介绍 Node.JS是一套使用JavaScript语言的后台.它执行Javascript的速度非常快,性能非常好. ...
- 【转载】Node.js 教程(菜鸟教程系列)
很好的一篇教程:Node.js 教程 简单做下笔记 概述 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时建立 ...
- Node.js 教程
菜鸟教程:https://www.runoob.com/nodejs/nodejs-tutorial.html node js 官网:https://nodejs.org/en/download/ 廖 ...
- 九宫怎么排列和使用_广告视频配音剪映零基础入门教程第二十三篇:剪辑之九宫格教程...
朋友圈最火九宫格视频你们知道是怎样制作的吗?我们常常在玩朋友圈的时候想用九宫格照片,但是你们有没有遇到这种情况,想玩九宫格却发现找不到那么多能用的照片,那这时候怎么办呢?玩腻了平常图片的发法,今天我们 ...
- JavaScript之后端Web服务器开发Node.JS基本模块学习篇
JavaScript之后端Web服务器开发Node.JS基本模块学习篇 基本模块 fs文件系统模块 stream支持流模块 http crypto加密模块 基本模块 因为Node.js是运行在服务区端 ...
- Node.js后端开发 - 基础篇 #18 nodemon工具
文章目录 前言 nodemon工具简单介绍 nodemon工具安装 nodemon工具使用(node app.nodemon app) nodemon工具使用(npm run start) 前言 上篇 ...
- node.js的前世今生(特色篇)
前言 在上一篇的文章里我们见证了node的诞生和发展史知道了node是怎么出现的,私下我查阅了很多资料和询问了一些有经验丰富的人在加上一些自己对node的理解,对整体有了一个稍微清晰的认识 希望通过这 ...
- 机器学习实战教程汇总(十三篇)
机器学习实战教程(13篇) 这些网址非常适合想学习机器学习,却苦于没有项目(尤其缺少数据)的人.无意中看到,给自己做一个记录. 机器学习实战教程(一):K-近邻算法(史诗级干货长文)https://c ...
最新文章
- 能量平衡_巴夏:平衡自己的能量,疗愈自己,疗愈世界
- Eclipse下新建Maven项目、自动打依赖jar包
- python编程语言的缺点-常见的AI编程语言优缺点比较,程序员千万不要入错行!...
- WebStorm常用设置(转载)
- 081_html5地理定位
- 那个在轮胎上考了99分的孩子拒绝再上网课
- MySQL学习(二)
- 分布式理论(3):Paxos Made Simple
- Openstack api security testing tools
- [小笔记]TypeScript/JavaScript数组转置
- cookie和session笔记
- docker commit新镜像之后删除旧镜像
- 编写c高级语言程序步骤,高级语言程序设计知识点总结一
- ubuntu 查看和关闭后台程序
- URP渲染管线实战教程系列 之URP渲染管线实战解密(一)
- web zxr10 中兴 路由器_中兴 ZXR10与思科路由器互联问题-路由器
- 互联网创业公司如何防御DDoS攻击?
- CTC 论文阅读笔记
- 计算机病毒爆发的新闻,从两次勒索病毒爆发聊聊计算机安全重要性
- Hadoop学习之环境搭建和解决方案
热门文章
- Oracle表空间设计理念
- ArcGIS Server .net Web ADF 体系结构
- 微软软件开发技术二十年回顾(MFC篇)
- 车间调度建模系列8|扩展析取图之基于时间片段的赋时三维析取图模型
- 数据结构——单链表操作(一)——基础用法
- Landsat 数据下载与预处理
- mysql主从复制及读写分离
- OkHttp之ConnectInterceptor简单分析
- python直接取系统的时间_用Python在Linux中获得系统正常运行时间的最快方法
- Flink State - Backend Improvements and Evolution in 2021