一, Node 中 socket.io 基础
1, 是什么
Socket.IO 类库, 是在服务器和浏览器之间提供一个共享接口, 其可以用于实现以下几种通信方式:
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');
- });
- });
来源: http://www.qdfuns.com/article/51117/d974716981d139ac99faf328d2c6e333.html