安装 

socket.io/socket.io-client

基本用法

首先koa和socket.io代码片段

const server = require('http').
const server = require('http').Server(app.callback())
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的更多相关文章

  1. koa+mysql+vue+socket.io全栈开发之数据访问篇

    后端搭起大体的框架后,接着涉及到的就是如何将数据持久化的问题,也就是对数据库进行 CURD 操作. 关于数据库方案, mongodb 和 mysql 都使用过,但我选用的是 mysql,原因: 目前为 ...

  2. koa+mysql+vue+socket.io全栈开发之web api篇

    目标是建立一个 web QQ的项目,使用的技术栈如下: 后端是基于koa2 的 web api 服务层,提供curd操作的http接口,登录验证使用的是 json web token,跨域方案使用的是 ...

  3. 基于koa模块和socket.io模块搭建的node服务器实现通过jwt 验证来渲染列表、私聊、群聊功能

    1. 具体代码在需要的下载 https://gitee.com/zyqwasd/socket 效果: 2. package.json文件 1. 下载基本的模块  修改了start 脚本  nodemo ...

  4. koa+mysql+vue+socket.io全栈开发之前端篇

    React 与 Vue 之间的对比,是前端的一大热门话题. vue 简易上手的脚手架,以及官方提供必备的基础组件,比如 vuex,vue-router,对新手真的比较友好:react 则把这些都交给社 ...

  5. 基于react+react-router+redux+socket.io+koa开发一个聊天室

    最近练手开发了一个项目,是一个聊天室应用.项目虽不大,但是使用到了react, react-router, redux, socket.io,后端开发使用了koa,算是一个比较综合性的案例,很多概念和 ...

  6. 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(三)

    这几篇都是我原来首发在 segmentfault 上的地址:https://segmentfault.com/a/1190000005040834 突然想起来我这个博客冷落了好多年了,也该更新一下,呵 ...

  7. 使用express、react、webpack打包、socket.io、mongodb、ant.design、less、es6实现聊天室

    拿到一个项目,我们应该如何去完成这个项目呢. 是直接上手? 还是先进行分析,然后再去解决呢?毫无疑问,如果直接上手解决,那么可能会因为知道目标所在,而导致出现各种问题. 所以,我们应该系统的分析这个项 ...

  8. 【招聘App】—— React/Nodejs/MongoDB全栈项目:socket.io&聊天实现

    前言:最近在学习Redux+react+Router+Nodejs全栈开发高级课程,这里对实践过程作个记录,方便自己和大家翻阅.最终成果github地址:https://github.com/66We ...

  9. 如何使用koa实现socket.io官网的例子

    socket.io官网中使用express实现了一个最简单的IM即时聊天,今天我们使用koa来实现一下 ### 框架准备 确保你本地已经安装好了nodejs和npm,使用koa要求node版本> ...

随机推荐

  1. gulp在项目中的基本使用

    在项目中用gulp做项目的代码的管理,用起来很方便.主要用到了下面一些功能 关于js的处理,包括合并.压缩.加hash. 关于css的处理,编辑scss,合并css,加hash,自动加入前缀 本地开发 ...

  2. 2015219付颖卓《网络对抗》EXP8 Web基础

    实验后回答问题 1.什么是表单 来自百度百科的官方定义:表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方 ...

  3. day11.2lambda函数表达式 及其返回值注意事项

    lambda表达式 用于表示简单的函数 func1=lambda 参数:一句话函数体(默认返回函数体内执行的内容) 1.1结构 func=lambda a1,a2 : a1+100 val=func( ...

  4. PTA9

    这个作业属于哪个课程 C语言程序设计2 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/software-engineering-class2-2018/ ...

  5. 学习笔记CB004:提问、检索、回答、NLPIR

    聊天机器人,提问.检索.回答. 提问,查询关键词生成.答案类型确定.句法和语义分析.查询关键词生成,提问提取关键词,中心词关联扩展词.答案类型确定,确定提问类型.句法和语义分析,问题深层含义剖析.检索 ...

  6. LEB128相关知识

    LEB128相关知识 介绍 LEB128(little endian base 128)是一种变长的整数压缩编码形式,它是出自于DWARF debug file format.在Android的Dal ...

  7. 记录一次Struts s2-045重大安全漏洞修复过程

    [升级修复] 受影响用户可升级版本至Apache Struts 2.3.32 或 Apache Struts 2..5.10.1以消除漏洞影响. 官方公告:https://cwiki..apache. ...

  8. A*搜索详解(2)——再战觐天宝匣

    书接上文.在坦克寻径的,tank_way中,A*算法每一步搜索都是选择F值最小的节点,步步为营,使得寻径的结果是最优解.在这个过程中,查找最小F值的算法复杂度是O(n),这对于小地图没什么问题,但是对 ...

  9. Application、QueryString、session、cookie、ViewState、Server.Transfer等

    Application: WebForm1.aspx: protected void Button1_Click(object sender, EventArgs e) { ; Response.Re ...

  10. SoapUI简介及下载地址

    SoapUI是一个开源测试工具,通过soap/http来检查.调用.实现Web Service的功能/负载/符合性测试.该工具既可作为一个单独的测试软件使用,也可利用插件集成到Eclipse,mave ...