Socket
基于net模块实现聊天
客户端代码
var net = require('net') //引入内置net包
const readline = require('readline') //逐行读写包
var port = 9000
var host = '127.0.0.1'
var socket = new net.Socket()
socket.setEncoding = 'UTF-8'
socket.connect(port, host, () => {
socket.write('hello.')
})
socket.on('data', (msg) => { //接受到数据打印
console.log(msg.toString())
say()
})
socket.on('error', function(err) {
console.log('error' + err);
})
socket.on('close', function() {
console.log('connection closeed');
})
const r1 = readline.createInterface({ //逐行读写固定语法
input: process.stdin,
output: process.stdout
})
function say() {
r1.question('请输入：\n', (inputMsg) => {
if (inputMsg != 'bye') { //输入为bye时销毁socket并关闭逐行读写
socket.write(inputMsg + '\n')
} else {
socket.destroy()
r1.close()
}
})
}
服务端代码
const net = require('net')
const server = new net.createServer()
const clients = {} //创建对象存入客户端
let clientName = 0 //流水号id
server.on('connection', (client) => {
client.name = ++clientName //每一个连接到服务端 ++id 并存入对象中
clients[client.name] = client
client.on('data', (msg) => {
// console.log('客户端传来：' + msg);
broadcast(client, msg.toString()) //广播信息
})
client.on('error', (e) => {
console.log('client error' + e);
client.end()
})
client.on('close', (data) => {
delete clients[client.name] //断开连接时从对象中删除该客户端
console.log(client.name + ' 下线了');
})
})
function broadcast(client, msg) { //遍历对象中的所有客户端返回信息实现广播
for (var key in clients) {
clients[key].write(client.name + ' 说：' + msg)
}
}
server.listen(9000, 'localhost')
基于WebSocket实现聊天
什么是WebSocket？
WebSocket是一种在单个TCP连接上进行全双工通信的协议。
WebSocket通信协议于2011年被IETF定为标准RFC 6455，并由RFC7936补充规范，WebSocket API也被W3C定为标准。
WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。
在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
为什么要使用WebSocket？
HTTP 协议是一种无状态的、无连接的、单向的应用层协议，它采用了请求/响应模型，通信请求只能由客户端发起，服务端对请求做出应答处理。
在前端开发方面，当我们想要了解我们处理的某个事件的状态时，需要由服务端来告诉我们这件事情处理得怎么样了，如果采用HTTP请求的方式，需要进行轮询的请求方式才可以得到我们想要的结果，这种方式效率低，浪费资源，也不具备实时性，因为轮询的时间也不好确定。
而Websocket可以在客户端和服务端之间建立长连接，任意一方都可以互相发送和接收消息，比采用轮询的方式方便多了。
在vue3开发中的应用
开源工具库VueUse提供的useWebSocket钩子函数，具体使用方式可参考useWebSocket，这里就不作详细介绍了。
由于最近在了解node如何搭建WebSocket服务端，为了更方便测试，前端方面也在尝试对WebSocket客户端进行封装，下方为封装的ws.ts的代码。
// ws.ts
import { ref } from 'vue'
/** WebSocket */
export class Ws {
/** ws */
private ws: WebSocket | null
/** 连接状态 */
public socketStatus: boolean
/** 消息内容 */
public message: any
constructor() {
this.ws = null
this.socketStatus = false
this.message = ref()
}
/** 建立连接 */
connect(url: string) {
this.ws = new WebSocket(url)
this.ws.onopen = this.onopen.bind(this)
this.ws.onmessage = this.onmessage.bind(this)
this.ws.onclose = this.onclose.bind(this)
this.ws.onerror = this.onerror.bind(this)
}
/** 连接成功 */
onopen() {
this.socketStatus = true
console.log('websocket连接成功', this.ws)
}
/** 接收消息 */
onmessage(e: { data: string }) {
this.message.value = JSON.parse(e.data)
console.log('接收消息', JSON.parse(e.data))
}
/** 连接关闭 */
onclose() {
this.socketStatus = false
console.log('websocket连接关闭')
}
/** 连接失败 */
onerror(e: any) {
this.socketStatus = false
console.log('websocket连接失败', e);
}
/** 发送消息 */
send(message: any) {
if (this.ws && this.socketStatus) {
this.ws.send(JSON.stringify(message))
console.log('发送消息', message)
}
}
}
如上方代码所见，我们定义了一个Ws类，其包含了ws、socketStatus和message等3个属性，ws是WebSocket的实例化对象；socketStatus是ws连接状态，类型为boolean，可用于判断ws连接是否成功；
message是所接收到的服务端发来的消息，可根据消息内容的事件（event）不同来执行不同的操作。
Ws类包含了connect、onopen、onmessage、onclose、onerror和send等6个方法
-
connect用于创建ws连接，需要传入一个url参数，即服务端的建立的ws链接
-
onopen是在建立连接成功后执行的，在此我们将socketStatus的值更改为true
-
onmessage负责接收消息，在此我们将message更改为服务端发送来的消息
-
onclose是连接关闭时执行的，在此我们将socketStatus的值更改为false
-
onerror是连接失败时执行的，在此我们将socketStatus的值更改为false
-
send用于给服务端发送消息，只有当socketStatus为true时才会执行。
在vue3项目开发中，我们一般会将建立一个挂载在vue全局的ws连接，并通过发送和接收的消息内容的事件（event）的不同来执行不同的操作。
在vue3项目的main.ts中引入ws.ts文件，并建立连接和发送消息。
引入ws并建立连接
// 实例化ws
const ws = new Ws()
// 将ws挂载到vue全局
app.config.globalProperties.$ws = ws
// 创建连接
ws.connect('ws://localhost:17030')
// 判断是否连接成功，如成功则发送消息
let timerID = setInterval(() => {
if (ws.socketStatus) {
console.log('ws已连接成功');
ws.send({
event: 'hello',
data: '服务端你好'
})
clearTimeout(timerID)
return
}
console.log('ws正在连接中...');
}, 500)
在具体某个业务的vue文件中，我们可以通过watch来监听接收到的消息。
当接收到服务端发送的消息时，可根据消息的事件（event）来处理对应的业务。
在vue文件中监听消息变化
import { getCurrentInstance, watch } from 'vue'
const { proxy } = getCurrentInstance() as any
watch(() => proxy.$ws.message, (message) => {
console.log('当前页面接收到消息', message.value);
if(message.value.event === 'handle') {
console.log('当事件为handle时，这里处理hanldle对应的业务');
}
},
{ deep: true }
)
WebSocket onopen概率不触发
当需要WebSocket在onopen监听的回调中发送消息会有概率发送不成功
原因就是WebSocket会进行重新连接 在连接过程中共发送消息就会发送失败
export default {
data() {
return {
ws: new WebSocket('ws://127.0.0.1:9527/') // 将WebSocket定义在data中
}
},
async created() {
await new Promise((resolve) => {
this.ws.onopen = () => {
resolve() // 等待连接成功 再发送消息并执行后续代码
}
}
)
this.ws.send(JSON.stringify({ userid: this.loginUserInfo.userId })) // 客户端开启时向服务器发送信息
console.log('-----------------------------------------------------------------open')
this.ws.onmessage = (msg) => {
}
this.ws.onerror = (err) => {
console.log(err)
}
this.ws.onclose = () => {
console.log('close')
}
}
}
基于socket.io实现聊天
兼容ie8
通过自定义事件进行数据传递
建立连接
客户端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script src="https://cdn.socket.io/4.4.1/socket.io.min.js"
integrity="sha384-fKnu0iswBIqkjxrhQCTZ7qlLHOFEgNkRmK2vaO/LbTZSXdJfAu6ewRBdwHPhBo/H" crossorigin="anonymous"></script>
<!-- 在线引入socket.io.js -->
<script>
const sc = io('http://127.0.0.1:3000') // 设置连接url
// const sc = io('http://127.0.0.1:3000?user='+user)
// 可以设置query参数并在js中的socket.handshake.query.user获取
sc.on('connect',() => { // 连接进socketio
console.log('连接成功');
})
// 通过sc.on()绑定事件
// 通过sc.emit()触发事件
</script>
</html>
服务器代码
const express = require('express') // 引入express
// 引入socket第一步 引入http模块的createServer
const { createServer } = require('http')
// 引入socket第二步 通过socket.io引入 Server方法创建socket服务
const { Server } = require('socket.io')
// 创建一个express实例
const app = express()
// 创建静态服务器 访问客户端网页不会跨域
app.use(express.static('public'))
// 引入socket第三步 使用原生http模块来驱动web服务
const httpServer = createServer(app)
const io = new Server(httpServer, {/* options */}) // 创建io实例
io.on('connect',(socket) => {
// socket为连接进socketio的对象
// 通过socket.on 绑定事件
// 通过io.emit 触发事件
// io.emit() 向全部发送信息
// io.to(room/socketid).emit() 指定人/房间
// socket.emit() 向自己发送
// socket.join() 加入群组
// socket.handshake.query 获取io连接地址的query参数
// socket.nsp.sockets 获取所有连接的socket对象
// socket.id 获取socket对象的id (不可靠 每次连接都会变化 单对单发送需要使用)
})
// 引入socket的第四步 使用原生的http来监听端口
httpServer.listen(3000, () => {
console.log('httpServer is running at 3000...');
})
socket.io demo
服务端
const express = require('express') // 引入express
// 引入socket第一步 引入http模块的createServer
const { createServer } = require('http')
// 引入socket第二步 通过socket.io引入 Server方法创建socket服务
const { Server } = require('socket.io')
// 创建一个express实例
const app = express()
// 创建静态服务器 访问客户端网页不会跨域
app.use(express.static('public'))
// 引入socket第三步 使用原生http模块来驱动web服务
const httpServer = createServer(app)
const io = new Server(httpServer, {/* options */}) // 创建io实例
io.on('connect',(socket) => {
// 接收广播的消息 接收到触发广播事件发送给所有用户
socket.on('sendmsg',(res) => {
console.log('有人传消息过来了',res);
io.emit('boradcast',{ username:socket.handshake.query.user, res:res })
})
// 绑定事件加入群组
socket.on('addclass',() => {
socket.join('123')
})
// 群组消息的广播
socket.on('sendmsgg',(res) => {
console.log('有人传群组消息过来了',res);
io.to('123').emit('boradcast',{ username:socket.handshake.query.user, res:res })
})
// 单人发送消息 先获取要发送给的用户和信息
// 遍历所有的用户 找出要发送给的用户的昵称和socketid
// 单人广播信息
socket.on('sendone', (res) => {
console.log('有人发单人信息来了');
const{ user, msg }=res
const client=[]
socket.nsp.sockets.forEach((v) => {
client.push({
id:v.id,
name:v.handshake.query.user
})
})
const userone = client.filter((v) => {
return v.name==user
})
io.to(userone[0].id).emit('boradcast',{ username:socket.handshake.query.user, res:msg })
})
})
// 引入socket的第四步 使用原生的http来监听端口
httpServer.listen(3000, () => {
console.log('httpServer is running at 3000...');
})
客户端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="context">
</div>
<div>
<input type="text" placeholder="用户名" id="user"><button id="login">登录</button>
</div>
<div>
<input type="text" placeholder="输入信息" id="msg"><button id="submit">发送</button>
</div>
<br>
<br>
<div>
<button id="addclass">加入群组聊天</button>
<input type="text" placeholder="输入信息" id="msgg"><button id="submitg">发送</button>
</div>
<br>
<br>
<div>
个人聊天
<input type="text" placeholder="发送给用户" id="userone">
<input type="text" placeholder="输入信息" id="umsg"><button id="usubmit">发送</button>
</div>
</body>
<script src="https://cdn.socket.io/4.4.1/socket.io.min.js"
integrity="sha384-fKnu0iswBIqkjxrhQCTZ7qlLHOFEgNkRmK2vaO/LbTZSXdJfAu6ewRBdwHPhBo/H" crossorigin="anonymous"></script>
<!-- 在线引入socket.io.js -->
<script>
document.querySelector('#login').addEventListener('click',(e) => {
const user = document.querySelector('#user').value
const sc = io('http://127.0.0.1:3000?user='+user)
sc.on('connect',() => {
console.log(user+'连接成功');
})
// 多人广播
document.querySelector('#submit').addEventListener('click',(e) => {
const msg = document.querySelector('#msg').value
sc.emit('sendmsg',msg)
})
sc.on('boradcast',(res) => {
console.log('有人传消息来了');
const {username,res:msg}=res
document.querySelector('#context').innerHTML+='用户'+username+':'+msg+'<br />'
})
// 部分广播
document.querySelector('#addclass').addEventListener('click',(e) => {
sc.emit('addclass',() => {
console.log('加入了群组聊天');
})
})
document.querySelector('#submitg').addEventListener('click',(e) => {
const msg = document.querySelector('#msgg').value
sc.emit('sendmsgg',msg)
})
// 单人聊天
document.querySelector('#usubmit').addEventListener('click',(e) => {
const user = document.querySelector('#userone').value
const msg = document.querySelector('#umsg').value
sc.emit('sendone',{user,msg})
})
})
</script>
</html>
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
