使用express服务
const path = require('path');
const app =express();//其实是一个监听函数
const server = require('http').createServer(app);
//使用静态文件中间件,把当前目录下面的public目录作为静态文件的根目录
app.use(express.static(path.resolve('public')));
a.简单的使用websocket.io
let io = require('socket.io')(server);
io.on('connection',function(socket){
console.log('客户端连接成功');
socket.on('message',function(message){
//对发送消息过来的客户端发送消息
socket.send('客户端发过来的消息0'+message)
//向所有的客户端发送消息,但不包括自己
socket.brocast.emit('message',message)
//向所有连接此服务器的客户端发送广播(注意是io.emit,而不是socket.send)
io.emit('message',message)
})
})
b 使用命名空间 实例中两个命名空间info job
//io.on('connection',function('socket){}) 等价于===io.of('/').on('connection',function(socket){})
io.of('/dev').on('connection',function(socket){
console.log('客户端连接成功');
socket.on('message',function(message){
io.of('/dev').emit('message',message) //向所有连接此服务器的客户端发送广播(注意是io.emit,而不是socket.send)
})
})
io.of('/job').on('connection',function(socket){
console.log('客户端job连接成功');
socket.on('message',function(message){
console.log('客户端发过来的消息:'+message);
io.of('/job').emit('message',message) //向所有连接此服务器的客户端发送广播(注意是io.emit,而不是socket.send)
})
})
c. 进入不同的命名空间不同房间(以info命名空间为例)
io.of('/info').on('connection',function(socket){
console.log('客户端info连接成功');
let roomName
socket.on('message',function(message){
//向命名空间内的对应roomName的客户端广播
io.of('/info').in(roomName).emit('message',message)
})
//进入房间 socket.join(name)中的join是关键字固定的
socket.on('join',function(name){
roomName = name;
socket.join(name)
})
//离开房间 socket.leave(name)中的leave是关键字固定的
socket.on('leave',function(name){
socket.leave(name);
roomName = null;
})
})
a. 引入socket.io-client
import io from 'socket.io-client'
b.建立连接
//const socket = io('ws://localhost:8080')
//可以有很多种写法io()==io('ws://localhost:8080'),socket=io()貌似不行
//socket = io.connect('ws://localhost:8080')
//一般使用下面的写法
const socket = io('http://localhost:8080')
连接服务器不同的命名空间,与服务器端命名空间对应
const socket = io('http://localhost:8080/info')
const socket = io('http://localhost:8080/job')
c. 监听
mounted(){
socket.on('connect',function(){ //服务器连接成功的回调函数
console.log('连接成功');
});
socket.on('message',function(message){
console.log('服务器发送过来的消息:',message);
})
socket.on('error',function(error){
console.log('infoError',error);
})
},
methods: {
fayan(){ //给服务器发送消息
socket.send(this.content1) // this.content1要给服务器发送的消息
},
join(name){ //进入不同的房间
socket.emit('join',name)
},
leave(name){ //离开不同的房间
socket.emit('leave',name)
},
}
<template>
<div>
<Input v-model="content1"></Input>
<Button @click='fayan' >发言</Button>
<Button @click="join('red')" style='margin-left: 10px;' >进入红房间</Button>
<Button @click="join('green')" style='margin-left: 10px;' >进入绿房间</Button>
<Button @click="leave('red')" style='margin-left: 10px;' >离开红房间</Button>
<Button @click="leave('green')" style='margin-left: 10px;' >离开绿房间</Button>
</div>
</template>
HTTP无法轻松实现实时应用:HTTP协议是无状态的,服务器只会响应来自客户端的请求,但是它与客户端之间不具备持续连接。我们可以非常轻松的捕获浏览器上发生的事件(比如用户点击了盒子)
Nginx 转发 socket 端口常见场景:在线学习应用,在常规功能之外,增加一个聊天室功能,后端选择 swoole 提供服务提供者,同时不想前端直接 ip:port 方式链接到服务,需要使用 Nginx 进行转发。
Socket 的中文翻译过来就是“套接字”。套接字是什么,我们先来看看它的英文含义:插座。Socket 就像一个电话插座,负责连通两端的电话,进行点对点通信,让电话可以进行通信,端口就像插座上的孔,端口不能同时被其他进程占用。而我们建立连接就像把插头插在这个插座上
Socket.IO是一个WebSocket库,可以在浏览器和服务器之间实现实时,双向和基于事件的通信。它包括:Node.js服务器库、浏览器的Javascript客户端库。它会自动根据浏览器从WebSocket、AJAX长轮询、
轮询:客户端定时向服务器发送Ajax请求,服务器接到请求后马上返回响应信息并关闭连接;长轮询:客户端向服务器发送Ajax请求,服务器接到请求后hold住连接,直到有新消息才返回响应信息并关闭连接
这两天的工作中,我重构了一个项目里的客服聊天功能,是小程序的,用了小程序提供的websocket有关的接口,我感觉很简单,和web端的接口大体一致,不过我喜欢封装后去使用,封装成一个类,创建一个类的实例
await 后面若是跟的Promise,则接受Promise resolve的值。Promise reject的值需要try...catch住,或者await 后面的表达式跟着.catch()
传统的客户端和服务器通信协议是HTTP:客户端发起请求,服务端进行响应,服务端从不主动勾搭客户端。这种模式有个明显软肋,就是同步状态。而实际应用中有大量需要客户端和服务器实时同步状态的场景
最近在一个 React 项目中,使用到了 socket.io 处理即时消息,这里面有几点容易被忽视的问题,例如:在 React 单页面应用中如何防止出现多个 socket 实例、在任意的的组件内如何方便的取到 socket 实例
Socket.IO 不仅支持 WebSocket,还支持许多种轮询机制以及其他实时通信方式,并封装了通用的接口。这些方式包含 Adobe Flash Socket、Ajax 长轮询、Ajax multipart streaming 、持久 Iframe、JSONP 轮询等
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!