HTML5 新特性 - WebSocket实现聊天（群聊天室、一对一聊天）

群聊天室

需求如下

在聊天界面中建立websocket连接.
一个客户端发消息, 服务端接收消息后把消息分发给所有客户端.
客户端接收服务端发回来的消息, 打印.(显示在聊天记录区域)

提示当前在线人数.

服务端中一旦接收到客户端连接, 维护一个全局变量count, 记录当前在线人数(count++)

// 声明一个全局变量count, 用于保存当前在线人数
let count = 0
socketio.on('connection', (socket)=>{console.log('有客户端连进来了:'+socket.id)count++// 将count的值,给所有客户端都发一遍socketio.emit('countmsg', count)// ....
})

当服务端发现有客户端断开连接就需要让count--

// 监听socket连接的断开, 一旦连接断开, count--, 再给所有客户端发一遍
socket.on('disconnect', ()=>{count--socketio.emit('countmsg', count)
})

无论count如何变化, 只要count有变化就需要将count实时发给所有客户端.

客户端接收服务端发过来的消息countmsg. 将人数实时显示在页面中.

// 监听服务端发给客户端的count消息   实时在线人数  更新界面
socket.on('countmsg', (data)=>{userNumber.innerHTML = data
})

一对一聊天的实现思路

客户端向服务端发送请求, 请求连接连接.
服务端一旦监听到连接的建立, 将连接对象与客户端id绑定在一起, 存起来.

客户端发消息时需要携带目标用户(发给谁):

{name: 'zs', to:'目标id', avatar:'a.jpg', content:'消息'
}

服务端接收到消息后, 解析出目标用户(目标id), 找到当时存储的socket对象, 调用socket.emit()单独给它发消息即可. 发消息时注意消息内容:
```
{from:'zs', content:'内容', avatar:'a.jpg'}
```

HTML5 新特性 - WebSocket实现聊天（群聊天室、一对一聊天）相关推荐

HTML中三维特性,前端进阶系列(三):HTML5新特性
HTML5 是对 HTML 标准的第五次修订.其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入.HTML5 的语法是向后兼容的.现在国内普遍说的 H5 是包 ...
html5储存类型特点,避免踩雷！你不得不知的 HTML5 “新”特性
什么是 HTML5 HTML的发展历程如下: 产生于1990年 1997年 HTML4 出现,成为互联网开发的标准 2008年,HTML5正式出现,2002年趋于稳定 HTML在发展过程中,HTML4 ...
【HTML5新特性】
HTML5新特性一.语义标签二.增强型表单 1. input特性 2. 五个表单元素 3. 表单属性三.音频和视频四.canvas 五.SVG 六.地理位置七.拖放API 八.web Wor ...
Html5新特性归纳
Html5新特性文章目录 Html5新特性一.简介二.十大新特性 1.语义化结构化标签 1.section 2.header 3.footer 4.nav 5.article 6.aside 7 ...
Html5新特性总览
Html5新特性总览 1.HTML5 新元素标签描述 < article> 定义页面独立的内容区域. < aside> 定义页面的侧边栏内容. < bdi> 定 ...
html5新特性与用法大全了解一下
有好多小伙伴私聊我问我html5新特性和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等 2)增强型表单表单2 ...
html5新特性表单控件,老生常谈h5新特性1:(表单)
老生常谈h5新特性1:(表单) HTML5新特性 -- 十大新特性 (1)新的语义标签和属性 (2)表单新特性 (3)视频和音频 (4)Canvas绘图 (5)SVG绘图 (6)地理定位 (7)拖放A ...
HTML5新特性的学习笔记
HTML5新特性的学习笔记 HTML 超文本标记语言: HyperText Markup Language 这份学习笔记的主要内容是HTML5的新标签基于菜鸟教程的个人向学习笔记菜鸟教程文章目录 ...
html5新特性 gps,老生常谈H5新特性:地理定位
HTML5新特性 1.新的语义标签 2.表单2.0 3.视频和音频 4.Canvas绘图 5.SVG绘图 6.地理定位 7.拖放API 8.WebWorker 9.WebStorage 10.WebS ...
HTML基础（一）--HTML5新特性和语义化
一.语义化概念 HTML5的语义化指的是合理正确的使用语义化标签来创建页面标签,正确的标签做正确的事,有利于SEO 二.语义化标签 header .nav.main(文档的主体).arcticle.s ...

HTML5 新特性 - WebSocket实现聊天（群聊天室、一对一聊天）

群聊天室

一对一聊天的实现思路

HTML5 新特性 - WebSocket实现聊天（群聊天室、一对一聊天）相关推荐

最新文章

热门文章