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[js]获取url参数的代码
Oct 17 Javascript
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
js获取字符串最后一位方法汇总
Nov 13 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
详解Vue组件之间的数据通信实例
Jun 17 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
详解vue-router传参的两种方式
Sep 10 Javascript
vue src动态加载请求获取图片的方法
Oct 17 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 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
博士208HAF收音机实习报告
2021/03/02 无线电
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
JavaScript中令你抓狂的魔术变量
2006/11/30 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
理解javascript闭包
2015/12/15 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
2016/10/13 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
js中new一个对象的过程
2017/02/20 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
js根据后缀判断文件文件类型的代码
2020/05/09 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
一行JavaScript代码如何实现瀑布流布局
2020/12/11 Javascript
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
python网络编程学习笔记(四):域名系统
2014/06/09 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
PyCharm中代码字体大小调整方法
2019/07/29 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
python 实现批量图片识别并翻译
2020/11/02 Python
工业学校毕业生自荐信范文
2014/01/03 职场文书
校园餐饮创业计划书
2014/01/10 职场文书
婚纱摄影师求职信
2014/03/07 职场文书
农业项目建议书
2014/08/25 职场文书
防灾减灾标语
2014/10/07 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
铣工实训报告
2014/11/05 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
工作态度不好检讨书
2015/05/06 职场文书