前奏

这篇文章仅对不熟悉在react中使用socket.io的人、以及websocket入门者有帮助。

下面这个动态图展示的聊天系统是用react+express+websocket搭建的,很模糊吧,要得就是这样的效果,我自己开了2个窗口,创建2个用户自问自答。没有什么高深的技术,对于很多想接触websocket的前端工程师来说,不擅长后端的websocket代码可能是硬伤。

开发环境

服务端:express服务器

客户端:react技术栈,开发环境采用前端服务器的方式,打包后将静态资源放到服务端目录下做测试。

基本介绍

想要实现一种实时的双向通信聊天系统,你可能会想到ajax轮询(长或短),但你最想要的还是websocket的实现。

在写测试代码之前,我纠结于前端用什么,后端用什么,后来后端选择了express、前端是react。

1、服务端使用到的js库

express

socket.io

2、前端使用到的js库

"react": "^16.2.0",
"react-dom": "^16.2.0",
"socket.io-client": "^2.0.4"

express服务端的实现

服务端的实现我不想多讲,你可以去看官方demo,代码很详细:socket官方demo实现

服务端的核心代码:

io.on('connection', function (socket) {
// 当客户端发出“new message”时,服务端监听到并执行相关代码
socket.on('new message', function (data) {
// 广播给用户执行“new message”
socket.broadcast.emit('new message', {});
}); // 当客户端发出“add user”时,服务端监听到并执行相关代码
socket.on('add user', function (username) {
socket.username = username;
//服务端告诉当前用户执行'login'指令
socket.emit('login', {});
}); // 当用户断开时执行此指令
socket.on('disconnect', function () {});
});

socket和mongodb有点像,它需要创建一个socket服务,创建成功之后,就可以通过on()去监听一个action,action在这里表示的是 'new message'、'add user'、'login'等指令,这些指令是可以自己命名的。

这些指令有什么作用呢?

当客户端和服务端建立socket通信之后,服务端可以向客户端发出指令,客户端也可以向服务端发出指令,开发者需要先给双方的通信约定一套指令系统。

比如服务端创建了一个 'new message'的指令,但是客户端没有创建这个指令,就会导致客户端无法接收到服务端发出的这个指令。客户端心里可能在想:服务端老兄在瞎bb什么?

客户端也需要 ’new message’指令,这样双方就能达成一套通信的协议,双方可以互相发出这条指令告诉对方最新的状态。

上面代码提到了socket.emit()和socket.broadcast.emit()2种用法,可以看看下面关于emit用法的详细解释。

// 发送到当前请求socket通信的客户端
socket.emit('message', "this is a test"); // 发送给所有客户端,除了发件人
socket.broadcast.emit('message', "this is a test"); // 发送给“游戏”房间(频道)中的所有客户,发件人除外
socket.broadcast.to('game').emit('message', 'nice game'); // 发送给所有的客户,包括发件人
io.sockets.emit('message', "this is a test"); // 发送给“游戏”房间(频道)的所有客户,包括发件人
io.sockets.in('game').emit('message', 'cool game'); // 发送给指定的socketid
io.sockets.socket(socketid).emit('message', 'for your eyes only');

socket的这种行为更像是redux,但是redux是单向数据流,而socket是双向。

React客户端的实现

React端的实现,才是我们应该关注的重点。

作为一个前端工程师,往往只需要和后端大神配合即可(全栈除外)。

1、在react组件中导入socket.io-client

前端使用的是socket.io-client库,这个库使用非常简单。下面的代码中,直接导入socket.io-client并且指向服务端的ip+端口即可。

import React, { Component } from 'react'

//require('socket.io-client')('服务端ip+端口')
const socket = require('socket.io-client')('http://localhost:3077'); class App extends Component { }

2、在componentDidMount写socket的接收指令action

socket.on()设置了服务端约定好的指令,当服务端发出这些指令时,客户端就能接收到。这时候,你可以在回调函数里面根据后端返回的数据 data 做前端的处理,比如设置state的状态,渲染服务端推送的数据。

componentDidMount() {
socket.on('login', (data) => {
console.log(data)
});
socket.on('add user', (data) => {
console.log(data)
});
socket.on('new message', (data) => {
console.log(data)
});
}

3、客户端推送数据到服务端

很多时候,客户端也需要告诉服务端有新的数据更新,当你在聊天界面发了一条新消息,这时候要告诉服务端,就通过socket.emit()方法,和服务端推送的方法是一样的。

socket.emit('new message', value)

总结

1、当你想要告诉对方一些话时,使用socket.emit()。

2、当你想接收对方的话时,使用socket.on()。

3、emit还有点对点、广播等用法。

4、最后说一句,这些都是基础知识。

React系列——websocket群聊系统在react的实现的更多相关文章

  1. Websocket 群聊功能

    websocket 群聊 前提关闭防火墙 写入代码 from flask import Flask,request,render_template from geventwebsocket.handl ...

  2. WebSocket群聊与单聊

    一 . WebSocket实现群聊 py文件代码 # py文件 from flask import Flask, render_template, request from geventwebsock ...

  3. websocket 群聊单聊

    websocket 介绍 介绍引自 https://segmentfault.com/a/1190000012709475 群聊 from flask import Flask, request, r ...

  4. websocket 群聊,单聊,加密,解密

    群聊 from flask import Flask, request, render_templatefrom geventwebsocket.handler import WebSocketHan ...

  5. 4. 彤哥说netty系列之Java NIO实现群聊(自己跟自己聊上瘾了)

    你好,我是彤哥,本篇是netty系列的第四篇. 欢迎来我的公从号彤哥读源码系统地学习源码&架构的知识. 简介 上一章我们一起学习了Java中的BIO/NIO/AIO的故事,本章将带着大家一起使 ...

  6. Asp.net SignalR 应用并实现群聊功能 开源代码

    ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程.实时 Web 功能是指这样一种功能:当所连接的客户端变得可用时服务 ...

  7. WebSocket+Java 私聊、群聊实例

    前言 之前写毕业设计的时候就想加上聊天系统,当时已经用ajax长轮询实现了一个(还不懂什么是轮询机制的,猛戳这里:https://www.cnblogs.com/hoojo/p/longPolling ...

  8. 群里分享的react的收藏一下!今日周末,改了个表单验证然后无所事事了!

    今日周末,改了个表单验证然后无所事事了,然后把昨天群里分享的react的收藏一下尽管现在还在研究angular和nodeJs毕竟刚刚开始用有点不熟...没准以后会研究一下react毕竟看着下面这张图还 ...

  9. 一例完整的websocket实现群聊demo

    前言 业余我都会花一些时间在tcp.http和websocket等领域的学习,现在觉得有点收获,所以把一个基于websocket的群聊功能的例子提供给大家玩玩.当然这是一个很完整的例子,包括webso ...

随机推荐

  1. python 镜像仓库获取最新版本号

    #/bin/python# -*- coding: utf-8 -*-import requestsfrom urllib import parsefrom requests.auth import ...

  2. Python 并发编程(上)

    Python 并发编程 参考文献:https://gitee.com/wupeiqi/python_course 并发编程:提升代码执行的效率.原来需要 10 分钟执行,并发处理后可以加快到 1 分钟 ...

  3. JZ-054-字符流中第一个不重复的字符

    字符流中第一个不重复的字符 题目描述 请实现一个函数用来找出字符流中第一个只出现一次的字符.例如,当从字符流中只读出前两个字符"go"时,第一个只出现一次的字符是"g&q ...

  4. C#-使用HttpListener创建http服务

    参考: c# 通过HttpListener创建HTTP服务 运行服务端程序,启动监听器httpobj.Start();时报错:System.Net.HttpListenerException: 'Ac ...

  5. 8.Flink实时项目之CEP计算访客跳出

    1.访客跳出明细介绍 首先要识别哪些是跳出行为,要把这些跳出的访客最后一个访问的页面识别出来.那么就要抓住几个特征: 该页面是用户近期访问的第一个页面,这个可以通过该页面是否有上一个页面(last_p ...

  6. layui 表单的使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. golang 中 channel 的详细使用、使用注意事项及死锁分析

    目录 1.什么是 channel,介绍管道 2.channel 的基本使用 3.channel 的使用场景 4.使用 channel的注意事项及死锁分析 什么是 channel 管道 它是一个数据管道 ...

  8. 还在写SQL做SAP二开?通过RFC调用NetWeaver,让HANA数据库操作更可靠

    相比于从零开始构建全套信息化系统,基于成熟的ERP等行业软件做二次开发是更多中大型企业应对个性化软件需求的首选方案.如何在二开模块中,可靠地对成品软件的数据库进行读写操作,以满足单据自动创建.元数据自 ...

  9. turtle海龟库

    •turtle的使用 #设置窗体大小 startx,starty非必需,默认在屏幕中间 turtle.setup(width,height,startx,starty) #海龟到(x,y)坐标 tur ...

  10. 基于EMR离线数据分析-反馈有礼

    "云上漫步"第三期-反馈有礼 参与体验产品,提交反馈,就有机会获得定制背包,T恤,超萌虎年鼠标垫,以及5到100元阿里云通用代金券~ 反馈地址: https://developer ...