socket.io和reactjs 实现即时通讯(1)

目的:创建一个即时聊天的 app,可以群聊私聊,不保存历史记录,完全的闪聊。

面向人群:需要对 socket.io 和 react 有一定了解。

3. 开发工具 visual studio code (推荐)

项目相对于之前分享的一些简单的 demo,要复杂一些,这里无法把所有代码详尽的展示,会对一些重要的难于理解的部分进行说明解释。介绍一下使用 socket 来开发即时通讯应用的思路。

有关 socket.io 这里简单介绍一下,一个是基于Nodejs架构体系的,支持websocket的协议用于实时通信的一个软件包。支持 WebSocket,也支持 ajax 轮询方式进行浏览器端和服务器端的实时数据传输。客户端A发送消息给客户端B,实际上是客户端 A 发送消息给服务端,服务端读取信息,信息中包含除消息体外更丰富的信息。将消息发送客户端A指定接受者,也就是客户端B,文章结尾通过示例讲解一下 socket API

登录界面,在登录页面输入昵称,作为聊天时的用户名

在意群聊中进行群聊,也可在搜索框中输入要私聊的用户,然后再左侧的聊天列表中单击该用户名便可进行私聊

在图中,黄色高亮显示文字为该聊天中最后一句

如上图,当一个用户在输入文字时,聊天中用户会看到 在输入文字的效果。

准备以后推出相关视频,一起 coding

创建一个项目后,通过 npm 引入所需要的模块,如下图,主要引入 react 和 socket.io。

服务端代码

先看一下结构

index.js 为入口文件,也就是服务启动文件

SocketManager.js socket管理文件,处理 socket 事件

Event.js (前后端共用,注册所有 socket 事件)

Factories.js 暴露创建 用户 聊天 消息等对象的工厂类

* 多说一句,看一看 Event.js 可以前后端共用,这也是 nodejs 开发web app 应用威力所在。

前端代码

看一下结构

入口文件为 index.js

通过 react 组件化前端,有关组件和界面对应关系如下图

接下来我们一个一个看文件

看一看 LoginForm.js 流程是提交登录后,发送验证用户的 socket 事件,返回值会在 setUser 函数中处理,

图1

成功后会调用 layout 中的 setUser 方法->(图3)

然后服务端接收用户验证事件,判断用户是否存在,具体怎么处理的,请看代码注释

图2

图3,

当 login.js 成功登录后,会将 user 保存在 layout的 state 中,并发送用户连接的事件

服务端接收用户连接事件,一系列处理,将用户保存到当前用户列表中,并向客户端发送用户连接的事件,

图4

用户断开连接时,服务端的相应处理

今天就到这里,分享 socket 是如何在客户端和服务端一来一回地完成交互的,简单介绍用户是如何登录到聊天室。

介绍一下 socket.io API

socket 中发送和接受消息

在房间内(也可以想象为一个通道)发送消息

给指定用户发送消息

如何set 和 get socket 的属性

如何进入一个房间(通道)和离开一个房间

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180204G033EK00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券