websocket
star@星空
相逢一醉是前缘,风雨散,飘然何处!
展开
-
Vue.js 如何使用 Socket.IO - 第七章(尾篇)
前言: 在很多需求业务中,都需要浏览器和服务器实时通信来实现功能,比如:扫码登录(扫码后,手机确认登录,PC网页完成登录并跳转)、订单语言提醒等,这些都是建立在两端实时通信的基础上的。对前端而言,来实现浏览器和服务器实时通信,最好的选择就是Socket.IO库,能够快速的实现两端实时通信功能。 1、什么是 Socket.IO? Socket.IO是一个WebSocket库,可以在浏览器和服务器之间实现实时,双向和基于事件的通信。它包括:Node.js服务器库、浏览器的Javascript客户端库。它会自动原创 2020-11-04 10:19:42 · 309 阅读 · 0 评论 -
Nodejs + WebSocket + Vue 实现多人聊天室- 第二章
前言 在《 WebSocket简绍- 第一章》中简单的介绍了,Nodejs + WebSocket的使用方法及作用,今天就用它来搭建一个简单的聊天室功能。 1、Nodejs+WebSocket创建后台服务器功能 2、Vue视图层,接收后台数据并渲染页面 3、LocalStorage存储会话ID等用户信息 vue + webpack 生成vue项目 脚手架搭建项目也是非常好用,简单命令即可搞定 vue init webpack web-im 然后一路向下,填写项目名称,描述,作者等等信息,完成安装。 现在原创 2020-11-03 16:55:11 · 1656 阅读 · 5 评论 -
Node+WebSocket+Vue聊天室: 界面美化,代码优化 – 第六章
前言 感谢你再次点开了我,只能说明你是喜欢我的,对不对?哈哈,开个玩笑。 今天主要是把之前的聊天室界面美化一下,不至于太难看,同时也对代码做了一些优化。具体细节请看详细内容。 并且可以线上体验了:体验地址 如果您还没有看过之前的文字,请点击下方链接查看! 推荐文章: 《WebSocket简介-第一章》 《Nodejs + WebSocket + Vue 实现多人聊天室- 第二章》 《Nodejs + WebSocket + Vue 一对一、一对多聊天室 - 第三章》 《Node+WebSocket+Vue原创 2020-11-04 09:51:00 · 1116 阅读 · 0 评论 -
Node + WebSocket + Vue 聊天室创建群聊/加入群聊功能 – 第五章
前言 本次算是做了一个小小的专题吧,“Nodejs + WebSocket + Vue实现聊天室功能”,目前还在一步一步推进,之前已经可以一对一、一对多聊天了,今天就来创建群聊组,加入群聊组等,同时项目中加入了全局message提示框,有兴趣的可以去看看。 如果您还没有看过之前的文字,请点击下方链接查看! 推荐文章: WebSocket服务端 做出调整的地方有注释,后面也会做出讲解。 ... let users = []; let conns = {}; // 群组数组,多个群 let groups =原创 2020-11-04 09:38:33 · 790 阅读 · 0 评论 -
Node+WebSocket+Vue 一对一、一对多聊天室消息已读未读 - 第四章
前言 这篇文章非常的短小,在之前文章基础上就实现一个非常小的功能点,消息已读和未读。如果您还没有看过之前的文字,请点击下方链接查看! 推荐文章: 《WebSocket简介-第一章》 《Nodejs + WebSocket + Vue 实现多人聊天室- 第二章》 《Nodejs + WebSocket + Vue 一对一、一对多聊天室 - 第三章》 WebSocket客户端UI界面更改 ... <div class="user-list"> <div class="user" @clic原创 2020-11-03 20:35:03 · 1161 阅读 · 0 评论 -
Nodejs + WebSocket + Vue 一对一、一对多聊天室 - 第三章
前言 如果你看到这篇文章,还没有了解前面2篇文章的同学,可以先去了解一波,这样上手更快。 推荐文章: 这篇文章都是前面文章的加强版,功能升级。给大家提供一个循序渐进的学习过程,一步一步的来。 在第二篇文章结束时,我们就已经可以一对多的聊天了,就是多人群聊。这次,我们进行扩展来实现一对一、一对多功能。 WebSocket客户端UI界面更改 有了一对一,一对多,我们就需要对直接的界面做出调整了。左边显示聊天人员列表,右边是具体消息列表。 <div class="web-im"> <di原创 2020-11-03 18:17:25 · 1539 阅读 · 0 评论 -
WebSocket简介-第一章
1. WebSocket是什么? 如果说ajax像手机发短信一样,发送信息,获取信息,那么websocket技术则是打电话这样。WebSocket要达到的目的是让用户不需要刷新浏览器就可以获得实时更新。 在WebSocket以前你可能会使用ajax进行轮询(包括现在有些没有集成WebSocket的软件),这就造成了服务器的多重压,大量消耗服务器带宽和资源。 面对这种状况,HTML5定义了WebSocket协议,能更好的节省服务器资源和带宽并实现真正意义上的实时推送。 WebSocket协议本质上是一个基于T原创 2020-11-03 14:26:41 · 859 阅读 · 0 评论