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


声明:本文转载自https://my.oschina.net/u/4018697/blog/2878031,转载目的在于传递更多信息,仅供学习交流之用。如有侵权行为,请联系我,我会及时删除。

#一、Node中socket.io基础

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

  • HTML5中的WebSocket通信
  • Flash中使用的WebSocket通信
  • XHR轮询
  • JSONP轮询
  • 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)
})//欢迎加入全栈开发交流圈一起学习交流:864305860
 
//客户端
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/](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)//欢迎加入全栈开发交流圈一起学习交流:864305860
 }//面向1-3年前端人员
 },//帮助突破技术瓶颈,提升思维能力
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');//欢迎加入全栈开发交流圈一起学习交流:864305860
 }); //面向1-3年前端人员
});//帮助突破技术瓶颈,提升思维能力

结语

感谢您的观看,如有不足之处,欢迎批评指正。

本文发表于2018年11月19日 13:00
(c)注:本文转载自https://my.oschina.net/u/4018697/blog/2878031,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除.

阅读 1969 讨论 0 喜欢 0

抢先体验

扫码体验
趣味小程序
文字表情生成器

闪念胶囊

你要过得好哇,这样我才能恨你啊,你要是过得不好,我都不知道该恨你还是拥抱你啊。

直抵黄龙府,与诸君痛饮尔。

那时陪伴我的人啊,你们如今在何方。

不出意外的话,我们再也不会见了,祝你前程似锦。

这世界真好,吃野东西也要留出这条命来看看

快捷链接
网站地图
提交友链
Copyright © 2016 - 2021 Cion.
All Rights Reserved.
京ICP备2021004668号-1