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版本> ...
随机推荐
- POJ1064 Cable master(二分 浮点误差)
题目链接:传送门 题目大意: 给出n根长度为1-1e5的电线,想要从中切割出k段等长的部分(不可拼接),问这个k段等长的电线最长可以是多长(保留两位小数向下取整). 思路: 很裸的题意,二分答案即可. ...
- Jmeter接口测试+压力测试
链接推荐:https://blog.csdn.net/github_27109687/article/details/71968662
- tornado--启动
tornado--启动 from tornado import web from tornado import ioloop from tornado.httpserver import HTTPSe ...
- Python之面向对象和正则表达(代数运算和自动更正)
面向对象 一.概念解释 面对对象编程(OOP:object oriented programming):是一种程序设计范型,同时也是一种程序开发的方法,实现OOP的程序希望能够在程序中包含各种独立而又 ...
- 学习笔记DL007:Moore-Penrose伪逆,迹运算,行列式,主成分分析PCA
Moore-Penrose伪逆(pseudoinverse). 非方矩阵,逆矩阵没有定义.矩阵A的左逆B求解线性方程Ax=y.两边左乘左逆B,x=By.可能无法设计唯一映射将A映射到B.矩阵A行数大于 ...
- BootStrap的table技术小结:数据填充、分页、列宽可拖动
本文结构:先说明,后代码.拷贝可直接运行. 一.demo结构: 二.文件引入 这些里面除了下面2个比较难找,其他的都很好找 bootstrap-table-resizable.js colResiza ...
- Thread.yield( )通俗理解
一. Thread.yield( )方法: 使当前线程从执行状态(运行状态)变为可执行态(就绪状态).cpu会从众多的可执行态里选择,也就是说,当前也就是刚刚的那个线程还是有可能会被再次执行到的,并不 ...
- 基于Linux-3.9.4的mykernel实验环境的极简内核分析
382 + 原创作品转载请注明出处 + https://github.com/mengning/linuxkernel/ 一.实验环境 win10 -> VMware -> Ubuntu1 ...
- 做web开发的时候老是把颜色码忘记了,特地来写个博客,以后方便找。
对照表 英文代码 形像颜色 HEX格式 RGB格式 LightPink 浅粉色 #FFB6C1 255,182,193 Pink 粉红 #FFC0CB 255,192,203 Crimson 猩红 # ...
- Actifio中如何分析Oracle备份恢复的报错
场景不同,可以分析的日志不同. 有关oracle备份 (L0/L1) 或者Oracle Log smart backups的日志:UDSAgent.log (on target host locate ...