Vue与Node.js通过socket.io通信的示例代码


Posted in Javascript onJuly 25, 2018

一、Node中socket.io基础

1、是什么

Socket.IO类库,是在服务器和浏览器之间提供一个共享接口,其可以用于实现以下几种通信方式:

  1. HTML5中的WebSocket通信
  2. Flash中使用的WebSocket通信
  3. XHR轮询
  4. JSONP轮询
  5. Forever Iframe

在通信时,客户端与服务器端可以使用相同的API

2、怎么用

原理:创建Scoket.IO服务器,该服务器依赖于一个已经创建的HTTP服务器

服务器端引入

var http=require('http')
var sio=require('socket.io')
var server=http.createServer((req,res)=>{
 res.writeHead(200,{'Content-type':'text/html'})
 res.end(fs.readFileSync('./snak.html'))
}).listen(8088)//创thhp建服务器
var socket=sio.listen(server)//监听http服务器
socket.on('connection',(socket)=>{//建立连接后的回调函数
})//这里的socket参数,是服务器端用于与客户端建立连接的scoket端口对象

客户端引入

<script src='/socket.io/socket.io.js'></script>
//js
var socket=io.connect()

发送接收消息

send 发送

socket.send('收到信息')

监听message接收消息

socket.on('message',(val)={ console.log(val) })

emit发送

socket.emit('news',data,(val1,val2...)=>{})

监听同样是事件接收

socket.on('news',(val)={ console.log(val) })

使用send发消息,要用‘message'接收,另一端会触发该事件.

使用emit发送,另一端触发同样的事件来接收。

广播消息

用于多个客户端与服务器端连接。服务器端使用sockets属性,向所用客户端发消息。或者使用用于与客户端建立连接的socket对象,该对象具有broadcast对象,代表所有与其他Socket.IO客户端建立连接的socket对象。

//服务器端
var io = require('socket.io').listen(server);
io.sockets.on('connection', (socket) => {
io.sockets.emit('login',name);
//socket.broadcast.emit('login',name)
})

//客户端
var socket=io.connect()
socket.emit('login',name)

二、Vue中使用socket.io

在项目目录下

npm install vue-socket.io
npm install socket.io-client

在main.js中引入

import VueSocketio from 'vue-socket.io';
import socketio from 'socket.io-client';
Vue.use(VueSocketio,socketio('http://localhost:8888/'));//与服务端链接

Vue组件中

export default {
 name: "NetList",
 sockets: {
 //不能改,j建立连接自动调用connect
 connect: function() {
  //与socket.io连接后回调
  console.log("socket connected");
 },
//服务端向客户端发送login事件
 login: function(value) {
  //监听login(后端向前端emit login的回调)
console.log(value)
 }
 },
updated(){
//数据更新时,向服务器端发送事件
this.$socket.emit("compile"); //触发start
}

服务器端

var http = require('http');
var fs = require('fs');
var exec = require('child_process').exec;
var server = http.createServer(function (req, res) {
 // console.log(req)
 // console.log(res)
 // fs.readFile('./index.html',function(error,data){//若根目录有index.html,访问地址,将显示index.html
 //  res.writeHead(200,{'Content-Type':'text/html'});
 //  res.end(data,'utf-8');
 // });
}).listen(8888);//创建http服务
console.log('Server running ');
var io = require('socket.io').listen(server);
io.sockets.on('connection', (socket) => {
 console.log('链接成功');
 socket.on('compile', () => {
 socket.emit('login', 'ok');
 }); 
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 实现??打印?理
Apr 28 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
跟我学习javascript的prototype原型和原型链
Nov 18 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
node中koa中间件机制详解
Aug 22 Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 #jQuery
详解Vue源码学习之callHook钩子函数
Jul 25 #Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 #Javascript
浅析JS中回调函数及用法
Jul 25 #Javascript
详解使用mpvue开发github小程序总结
Jul 25 #Javascript
详解mpvue开发小程序小总结
Jul 25 #Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 #Javascript
You might like
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
PHP进程同步代码实例
2015/02/12 PHP
详解PHP中mb_strpos的使用
2018/02/04 PHP
关闭时刷新父窗口两种方法
2014/05/07 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
JavaScript中原型链存在的问题解析
2016/09/25 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
详解python中requirements.txt的一切
2017/03/03 Python
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
基于python绘制科赫雪花
2018/06/22 Python
Python 互换字典的键值对实例
2019/02/12 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
美术专业个人自我评价
2014/01/18 职场文书
大学生个人自荐信
2014/02/24 职场文书
装修设计师求职信
2014/02/26 职场文书
服务承诺口号
2014/05/22 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
三好学生个人总结
2015/02/15 职场文书
第一军规观后感
2015/06/12 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
导游词之天下银坑景区
2019/11/21 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技