关于websocket制作聊天室的的一些总结
websocket的总结
在一个聊天室系统中,常常使用websocket作为通信的主要方式。
参考地址:https://www.jianshu.com/p/00e...
关于自己的看法:
websocket协议是一种新的tcp协议,与常用的http协议不同的地方在于,无论是客户端还是服务端,都能进行自由通信,双方都比较灵活,不会有局限性。
文中所提到的socket.io包是封装有websocket协议的包,他包含不少服务端处理的代码,兼容性强,主要服务于实时通信。
开始之前,需要构建网络服务,主要用到的包就是socket.io和http服务的包,由于是node的后台,所以需要设置一个进行监听的端口,方便在浏览器中调试。
/*app.js*/
/*构建http服务*/
var app = require('http').createServer()
/*引入socket.io*/
var io = require('socket.io')(app);
/*定义监听端口,可以自定义,端口不要被占用*/
var PORT = 8081;
/*监听端口*/
app.listen(PORT);
后台系统为nodejs搭载
主要应用在聊天系统中socket.io中的方法:
- socket.emit()
- socket.on()
- io.sockets.emit()
对于第一种,socket.emit()方法主要是在客户端和服务端之间进行信息请求,例如客户端向服务端发送请求或者服务端向客户端进行反馈请求,这两种情况下主要用到的方法。
需求场景:客户端上,用户输入账号密码进行登陆,服务端怎么识别?
(1)首先是客户端获取到用户在输入框中的信息,然后对服务端进行发送信息。
socket.emit('login',{username:uname})
代码块中,login为自定义方法名,其后是传送的数据,项目中只考虑到用户名的输入,所以保存为一个对象发送给服务端,这里用到了socket.emit()方法,是客户端----->服务端的请求。
(2)服务端对客户端所发送的请求进行处理
socket.on('login',function(data){
/*登陆验证等操作*/
})
在这里,通过socket.on来接受客户端所传递的数据,为相同方法名,其后跟的function函数为登陆验证的具体操作,比如用户验证是否存在。
(3)服务端验证成功了,把反馈信息发送给客户端。
通过上面知道,一端向另一端发送请求的时候,需要用到socket.emit()方法,但是这次是服务端向客户端进行发送消息。
socket.emit('loginSuccess',data)
这里,把之前客户端所发送的请求,再次返回去,让客户端进行操作。
(4)客户端接收返回结果
接收的方法,还是socket.on(),不过这次是客户端接收服务端所传递回来的信息。
socket.on('loginSuccess',function(data){
if(data.username === uname){
checkin(data)
}else{
alert('用户名不匹配,请重试')
}
})
function checkin(data){
/*隐藏登陆界面,显示聊天主页*/
$('.login-wrap').hide('slow');
$('.chat-wrap').show('slow');
}
通过以上4步,一次成功的登陆请求就成功了。
关于全频道广播功能
项目中提到了全频道的广播的功能,而io.sockets.emit的定义是服务端进行全频道广播,也就是对所有客户端进行广播,也跟我们常常在聊天中收到的官方推送一样。
io.sockets.emit('leave',username)
当用户进入或者离开时,会进行全频道广播,也就是通过io.sockets.emit方法进行。
最后感谢@一岑不再博主所写的demo项目,让我受益匪浅。
一岑博主主要文章传送门:链接描述
本文转载于:猿2048关于websocket制作聊天室的的一些总结
关于websocket制作聊天室的的一些总结的更多相关文章
- nodejs+websocket制作聊天室视频教程
本套教程主要讲解了node平台的安装,node初级知识.node 服务器端程序响应http请求,通过npm安装第三方包,websocket即时通讯.聊天页面界面制作.拖动原理.拖动效果.遮罩效果.定位 ...
- 基于WebSocket实现聊天室(Node)
基于WebSocket实现聊天室(Node) WebSocket是基于TCP的长连接通信协议,服务端可以主动向前端传递数据,相比比AJAX轮询服务器,WebSocket采用监听的方式,减轻了服务器压力 ...
- websocket+golang聊天室
原文地址: http://www.niu12.com/article/3 websocket+golang聊天室 main.go和index.html放在同一目录下 main.go package m ...
- Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
code&monkey Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...
- WebSocket 网页聊天室
先给大家开一个原始的websocket的连接使用范例 <?php /* * recv是从套接口接收数据,也就是拿过来,但是不知道是什么 * read是读取拿过来的数据,就是要知道recv过来的是 ...
- python tornado websocket 多聊天室(返回消息给部分连接者)
python tornado 构建多个聊天室, 多个聊天室之间相互独立, 实现服务器端将消息返回给相应的部分客户端! chatHome.py // 服务器端, 渲染主页 --> 聊天室建立web ...
- 基于nodejs+webSocket的聊天室(实现:加入聊天室、退出聊天室、在线人数、在线列表、发送信息、接收信息)
1 安装 socket.io模块 npm install "socket.io": "latest" 2 app.js相关 ws = require('soc ...
- 第一节:.Net版基于WebSocket的聊天室样例
一. 说在前面的话 该篇文章为实时通讯系列的第一节,基于WebSocket编写了一个简易版聊天样例,主要作用是为引出后面SignalR系列的用法及其强大方便之处,通过这个样例与后续的SignalR对比 ...
- 基于webSocket的聊天室
前言 不知大家在平时的需求中有没有遇到需要实时处理信息的情况,如站内信,订阅,聊天之类的.在这之前我们通常想到的方法一般都是采用轮训的方式每隔一定的时间向服务器发送请求从而获得最新的数据,但这样会浪费 ...
随机推荐
- YUV相关积累
关于yuv 格式-Semi Planar和Planar https://www.cnblogs.com/welen/articles/5454315.html
- Tableau学习Step4一数据解释、异常值监测、参数使用、分析结果如何对外发布
Tableau学习Step4一数据解释.异常值监测.参数使用.分析结果如何对外发布 本文首发于博客冰山一树Sankey,去博客浏览效果更好. 一. 前言 本教程通过一个案例从浅到深来学习Tableau ...
- LeetCode-095-不同的二叉搜索树 II
不同的二叉搜索树 II 题目描述:给你一个整数 n ,请你生成并返回所有由 n 个节点组成且节点值从 1 到 n 互不相同的不同 二叉搜索树 .可以按 任意顺序 返回答案. 二叉搜索树(Binary ...
- C#10新特性-lambda 表达式和方法组的改进
C# 10 中对Lambda的语法和类型进行了多项改进: 1. Lambda自然类型 Lambda 表达式现在有时具有"自然"类型. 这意味着编译器通常可以推断出 lambda 表 ...
- 基于kubernetes平台微服务的部署
基于kubernetes平台微服务的部署 首先下载插件: kubernetes Continuous Deploy 然后去找 .kube/ 里的config 复制里面的内容 去添加凭据: 然后就是脚本 ...
- Dapr集成之GRPC 接口
Dapr 为本地调用实现 HTTP 和 gRPC API . 通常大家第一时间想到的是通过 gRPC 调用 Dapr,更重要的一点是Dapr 也可以通过 gRPC 与应用程序通信. 要做到这一点,原理 ...
- 在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理,对比Moment.js和day.js的处理
Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js ...
- VuePress 博客之 SEO 优化(一) sitemap 与搜索引擎收录
前言 在 <一篇带你用 VuePress + Github Pages 搭建博客>中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档. 本篇讲讲 ...
- 关于C#窗体应用程序的一点总结
1.在窗体Form在Form_Load函数中写了过多的界面初始化语句导致界面卡顿时 解决方法为:将一些初始化语句写在public Form()函数中,会大大加快程序的初始化加载速度. 2.为butto ...
- 使用MariaDB backup恢复主从
安装 yum install MariaDB-backup 备份命令 工具需要直接操作数据目录,需要在数据库服务器上执行 mariabackup --backup --target-dir=/data ...