Koa,React和socket.io
安装
socket.io/socket.io-client
基本用法
首先koa和socket.io代码片段
- const server = require('http').
- const io = require('socket.io')(server)
- io.on('connection', socket => {
- console.log('连接成功!')
- })
- server.listen(, () => console.log('http:localhost:8080'))
然后react和socket.io-client代码片段,因为我们是跨域
- componentDidMount() {
- io('ws://localhost:8080')
- }
至此连接成功
具体用法
客户端向服务器发送请求
- socket.emit('sendmsg', {text})
服务器监听客服端请求,然后把数据返回给客户端
- io.on('connection', socket => {
- socket.on('sendmsg', data => {
- io.emit('recvmsg', data)
- })
- })
客户端监听'recvmsg'获取数据
- socket.on('recvmsg', data=>{
- this.setState({
- msg:[...this.state.msg, data.text]
- })
- })
Koa,React和socket.io的更多相关文章
- koa+mysql+vue+socket.io全栈开发之数据访问篇
后端搭起大体的框架后,接着涉及到的就是如何将数据持久化的问题,也就是对数据库进行 CURD 操作. 关于数据库方案, mongodb 和 mysql 都使用过,但我选用的是 mysql,原因: 目前为 ...
- koa+mysql+vue+socket.io全栈开发之web api篇
目标是建立一个 web QQ的项目,使用的技术栈如下: 后端是基于koa2 的 web api 服务层,提供curd操作的http接口,登录验证使用的是 json web token,跨域方案使用的是 ...
- 基于koa模块和socket.io模块搭建的node服务器实现通过jwt 验证来渲染列表、私聊、群聊功能
1. 具体代码在需要的下载 https://gitee.com/zyqwasd/socket 效果: 2. package.json文件 1. 下载基本的模块 修改了start 脚本 nodemo ...
- koa+mysql+vue+socket.io全栈开发之前端篇
React 与 Vue 之间的对比,是前端的一大热门话题. vue 简易上手的脚手架,以及官方提供必备的基础组件,比如 vuex,vue-router,对新手真的比较友好:react 则把这些都交给社 ...
- 基于react+react-router+redux+socket.io+koa开发一个聊天室
最近练手开发了一个项目,是一个聊天室应用.项目虽不大,但是使用到了react, react-router, redux, socket.io,后端开发使用了koa,算是一个比较综合性的案例,很多概念和 ...
- 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(三)
这几篇都是我原来首发在 segmentfault 上的地址:https://segmentfault.com/a/1190000005040834 突然想起来我这个博客冷落了好多年了,也该更新一下,呵 ...
- 使用express、react、webpack打包、socket.io、mongodb、ant.design、less、es6实现聊天室
拿到一个项目,我们应该如何去完成这个项目呢. 是直接上手? 还是先进行分析,然后再去解决呢?毫无疑问,如果直接上手解决,那么可能会因为知道目标所在,而导致出现各种问题. 所以,我们应该系统的分析这个项 ...
- 【招聘App】—— React/Nodejs/MongoDB全栈项目:socket.io&聊天实现
前言:最近在学习Redux+react+Router+Nodejs全栈开发高级课程,这里对实践过程作个记录,方便自己和大家翻阅.最终成果github地址:https://github.com/66We ...
- 如何使用koa实现socket.io官网的例子
socket.io官网中使用express实现了一个最简单的IM即时聊天,今天我们使用koa来实现一下 ### 框架准备 确保你本地已经安装好了nodejs和npm,使用koa要求node版本> ...
随机推荐
- linux下磁盘管理(du、df)命令使用
DF :disk free 磁盘可用量 DU: disk usage 磁盘使用 df:列出文件系统的整体磁盘使用量: df参数: -a:列出所有的文件系统,包括系统特有的/proc等文件系统 -k:以 ...
- Java基于opencv实现图像数字识别(四)—图像降噪
Java基于opencv实现图像数字识别(四)-图像降噪 我们每一步的工作都是基于前一步的,我们先把我们前面的几个函数封装成一个工具类,以后我们所有的函数都基于这个工具类 这个工具类呢,就一个成员变量 ...
- SQL中Union和Union All
工作中,看到大佬写的一段SQL,查询了五个表中的数据,最后求某个收入的总和,其中使用了Union All,因此在这里记录一下我从中学到的东西 先上语法 Union: [ Select语句1 ] U ...
- 关于修改banner信息;nginx反向代理apache应用
本周实验 1. Linux下Apache部署一个php页面,返回http数据包中查看server信息,修改Apache 配置使server banner自定义. 2. nginx设置反向代理,代理上面 ...
- 寒假作业 pta编程总结3
实验代码: 某地老鼠成灾,现悬赏抓老鼠,每抓到一只奖励10元,于是开始跟老鼠斗智斗勇:每天在墙角可选择以下三个操作:放置一个带有一块奶酪的捕鼠夹(T),或者放置一块奶酪(C),或者什么也不放(X).捕 ...
- H5 实现图片上传预览
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 《python for data analysis》第二章,美国1880-2010年出生人口姓名的数据分析
<利用python进行数据分析>第二章的姓名例子,代码.整个例子的所有代码集成到了一个文件中,导致有些对象名如year同时作为了列名与行名,会打印warning,可分不同的part依次运行 ...
- sql注入-推断是否存在SQL注入-and大法和or大法
来自:https://www.cnblogs.com/ichunqiu/p/5749347.html 页面不返回任何错误信息,我们就可以借助本方法来推断了,首先我们在参数后面加上 and 1=1和an ...
- MySQL数据库使用规范
一.建表规约 1.[强制]表达是与否概念的字段,必须使用is_xxx的方式命名,数据类型是unsigned tinyint (1表示是,0表示否) 说明:任何字段如果为非负数,必须是unsigned ...
- MUD 多人地下城
发售年份 1980 平台 多平台 开发商 Roy Trubshaw, Richard Battle 类型 冒险 https://www.youtube.com/watch?v=338WE8O2-KA