vue-socket.io 及 egg-socket.io 的简单使用
egg-socket.io 的使用
官方文档看这里 egg-socket.io
接下来的内容其实与文档里差不多,介意的童鞋略过就好,目前只是简单的引入,下周往后会写复杂些的逻辑,在后面的文章会介绍。
贴下目录结构
1. 下载安装
cnpm install --save egg-socket.io
2. 开启插件以及插件配置
开启插件
// app/config/plugin.js
exports.io = {
enable: true,
package: 'egg-socket.io'
};
插件配置
// app/config/config.default.js
// 这里的 auth 以及 filter 是待会会编写的两个中间件,用于不用依据自己的情况选择即可
exports.io = {
namespace: {
'/': {
connectionMiddleware: [ 'auth' ],
packetMiddleware: [ 'filter' ],
}
}
};
3. 编写中间件
// app/io/middlewware/auth.js
// 这个中间件的作用是提示用户连接与断开的,连接成功的消息发送到客户端,断开连接的消息在服务端打印
module.exports = app => {
return function* (next) {
this.socket.emit('res', 'connected!');
yield* next;
console.log('disconnection!');
};
}; // app/io/middleware/filter.js
// 这个中间件的作用是将接收到的数据再发送给客户端
module.exports = app => {
return function* (next) {
this.socket.emit('res', 'packet received!');
console.log('packet:', this.packet);
yield* next;
};
};
4. 编写控制器
// app/io/controller/chat.js
// 将收到的消息发送给客户端
module.exports = app => {
return function* () {
const self = this;
const message = this.args[0];
console.log('chat 控制器打印', message);
this.socket.emit('res', `Hi! I've got your message: ${message}`);
};
};
5. 编写路由
// app/router.js
// 这里表示对于监听到的 chat 事件,将由 app/io/controller/chat.js 处理
module.exports = app => {
app.io.of('/').route('chat', app.io.controllers.chat);
};
tip:
在业务结束时 发送消息
// app/controller 中
async send() {
const { ctx, app } = this;
const nsp = app.io.of('/'); let msg = '{"id":2, "message":666}' let data = await JSON.parse(msg) // app.io.controllers.chat(msg)
nsp.emit('chat', data);
return ctx.body = 'hi, egg';
}
vue-socket.io 的使用
1. 下载
cnpm install --save vue-socket.io
cnpm install --save socket.io-client
如果出现页面显示不出来,或者出现 TypeError: Cannot call a class as a function
可以尝试把依赖 替换成 "vue-socket.io": "^2.1.1-a"
2. 连接服务器,以及接收服务端消息
// src/main.js
import VueSocketio from 'vue-socket.io';
import socketio from 'socket.io-client'; Vue.use(VueSocketio, socketio('http://127.0.0.1:7001/')); new Vue({
el: '#app',
router,
template: '<App/>',
components: { App },
sockets: {
connect: function () {
console.log('socket connected');
},
res: function (val) {
console.log('接收到服务端消息', val);
}
}
});
Vue.use()里面的 url 是你服务器地址。
connect 是 http://socket.io 默认的事件,看这名字就知道是干啥的了,另外一个 res 是自定义的监听事件,表示监听服务端发送的名为 res 的事件。
3. 向服务端发送消息
<script>
// ...
methods: {
sendMessageToServer: function() {
this.$socket.emit('chat', '111111111111');
}
}
</script>
这里我们使用的事件名为 chat,所以服务端会将这条消息交给 chat.js(就是上面服务器端项目里面的文件啦) 这个控制器处理。
备注
项目部署到生产环境总是会出现各种各样的错误
nodejs+socket.io用nginx反向代理提示400 Bad Request-nginx反向代理nodejs
问题描述:在项目中引用Socket.Io,在项目部署后报错,本地运行不报错
错误原因:需要在配置文件nginx.conf中配置相关信息
解决方案:
在nginx文件的location中添加
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
第一行告诉Nginx在与Node后端通信时使用HTTP / 1.1,这是WebSockets所必需的。接下来的两行告诉Nginx响应升级请求,当浏览器想要使用WebSocket时,该请求由HTTP启动。这三行都是必须添加的。
例如:
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name localhost;
root /usr/share/nginx/html; # Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf; location / {
proxy_pass http://localhost:3100;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
}
}
参考链接
github
vue-socket.io 及 egg-socket.io 的简单使用的更多相关文章
- socket编程报异常java.io.EOFException
一个客户端连接服务器的小程序,服务器端可以正常读取客户端发来的数据 但是当客户端关闭时,服务端也关闭了,并且抛出如下的异常: java.io.EOFException at java.io.DataI ...
- Linux Network IO Model、Socket IO Model - select、poll、epoll
目录 . 引言 . IO机制简介 . 阻塞式IO模型(blocking IO model) . 非阻塞式IO模型(noblocking IO model) . IO复用式IO模型(IO multipl ...
- oracle数据库登录连接很慢;kettle连接oracle 报 IO 错误,socket time out 问题解决记录
问题描述: 1:oracle数据库连接登陆时突然变得很慢:sqldeveloper链接数据库很慢: 2:Kettle-spoon etl程序访问数据库,任务执行时报 :数据库连接 IO错误 :Sock ...
- socket.io 中文手册 socket.io 中文文档
socket.io 中文手册,socket.io 中文文档转载于:http://www.cnblogs.com/xiezhengcai/p/3956401.html 服务端 io.on('connec ...
- Socket.io文字直播聊天室的简单代码
直接上代码吧,被注释掉的主要是调试代码,和技术选型的测试代码 var app = require('express')(); var server = require('http').Server(a ...
- JAVA IO总结及socket简单实现
为了方便理解与阐述,先引入两张图: a.Java IO中常用的类 在整个Java.io包中最重要的就是5个类和一个接口.5个类指的是File.OutputStream.InputStream.Writ ...
- IO多路复用丶基于IO多路复用+socket实现并发请求丶协程
一丶IO多路复用 IO多路复用指:通过一种机制,可以监视多个描述符,一旦某个描述符就绪(一般是读就绪或者写就绪),能够通知程序进行相应的读写操作 IO多路复用作用: 检测多个socket是否已经发生变 ...
- (转)Linux Network IO Model、Socket IO Model - select、poll、epoll
Linux Network IO Model.Socket IO Model - select.poll.epoll 原文:https://www.cnblogs.com/LittleHann/p/ ...
- socket互传对象以及IO流的顺序问题
UserInfo.java package com.company.s6; import java.io.Serializable; public class UserInfo implements ...
- 网络IO模型:同步IO和异步IO,阻塞IO和非阻塞IO
同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非阻塞(non-blocking)IO分别是什么,到底有什么区别?这个问题其实不同的人给出 ...
随机推荐
- uC/OS-III 时钟节拍(一)
时钟节拍就是操作系统的时基,操作系统要实现时间上的管理,必须依赖于时基(时基即时间基准,操作系统的基准时钟). uC/OS-III时钟节拍的实现过程 时钟节拍就是系统以固定的频率产生中断(时基中断), ...
- 最近太多人问Protobuf的问题了,把这个重新搬出来!
pb杀手 我先让pbkiller做个自我介绍 pbkiller:我是一位专业的争对 protobuf 问题训练有素的杀手,我可以为您轻松搞定 protobuf 在 Cocos Creaotr 开发中的 ...
- Flutter中TabBarView切换状态保存
TabBarView 类似于Android中的viewPager,但是默认是没有实现切换分页状态保存的.估计是出于节约内存的原因吧. 发现这个问题的时候,搜索了一下全网.大致就两种解决方案,1是修改源 ...
- Web Storage和cookie的区别——每日一题20190629
Web Storage? 使用HTML5可以在本地存储用户的浏览数据. 使用的主要目的是为了克服Cookie带来的一些限制,当数据需要被严格控制在客户端上时,无需持续的将数据发回服务器 主要目标: 1 ...
- 从键盘录入输入3 个数num1,num2,num3,按从大到小进行输出
本题分别使用嵌套分支语句以及三目运算符来实现,两种方法,可以对比看看. import java.util.Scanner; /** * 从键盘录入输入3 个数a,b,c,按从大到小进行输出 * @au ...
- bugku旋转跳跃
下载下是一个mp3音频,尝试听了下,没有收获, 使用mp3stege,将文件拷在mp3stege目录下,然后使用cmd cd到目录下 命令行是decode -X -P 密码 文件 生成了一个文本 打开 ...
- 想转行做程序员,是学习JAVA还是Python?哪个更好?
请大家务必审题,转行做程序员,是程序员,并非数据分析也不是软件测试. 首先声明:这是一篇容易引起撕逼的问答,为了祖国和谐,人民安康,请各位看官尽量理性讨论. 同时,这篇文章是面向一些初入行的朋友进行一 ...
- 【包教包会】Chrome拓展开发实践
首发于微信公众号<前端成长记>,写于 2019.10.18 导读 有句老话说的好,好记性不如烂笔头.人生中,总有那么些东西你愿去执笔写下. 本文旨在把整个开发的过程和遇到的问题及解决方案记 ...
- Django-admin站点管理的详细使用
使用Django的管理模块,需要按照如下步骤操作: 管理界面本地化 创建管理员 注册模型类 自定义管理页面 1 管理界面本地化 在settings.py中设置语言和时区 LANGUAGE_CODE = ...
- VMware15.5版本下安装CentOS_7_64bit
本文介绍在VMware15.5版本下安装CentOS7. 工具准备: 1.VMware15.5版本 2.CentOS 7 64bit ISO镜像文件 一.创建虚拟机 这部分请参照我的另一个博客“一.新 ...