1.websocket是html5开始提供的一种浏览器和客户端进行全双工通讯的网络技术
现很多网站为了实现即时通讯,所用到的技术是轮询polling,使用websocket,浏览器和服务器只要做一个握手的动作,在两者之间形成快速通道
- 实时通讯,可以保持与客户端的长连接
- 节省资源:互相沟通的header大概2Bytes
- 推送信息:不需要客户端请求,服务器可以主动传送数据给客户端
微信小程序的websocket
websocket.wxml:
<input bindchange="sendMsg"></input>
websocket.js(一个连接):
var wsApi='ws://192.168.2.126:3001' //websocket是以ws为统一资源标志符,类似于 HTTPS
var openBol=false;
Page({
data: {
},
onLoad(){
//建立连接
wx.connectSocket({
url: wsApi,
header:{
'content-type': 'application/json'
},
protocols: ['protocol1'],
success(){
console.log('客户端连接成功')
}
})
//通过 WebSocket 连接发送数据。需要先 wx.connectSocket,并在 wx.onSocketOpen 回调之后才能发送。
wx.onSocketOpen(function(){
console.log('websocket连接以成功')
openBol=true
})
wx.onSocketMessage((result) => {
console.log(result)
})
},
sendMsg(e){
if(openBol){
wx.sendSocketMessage({
data: e.detail.value,
})
}
}
})
网页端
socket.html (另一个连接)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sockets</title>
</head>
<body>
<input type="text" id="txt1">
<script>
var socket=new WebSocket("ws://192.168.2.126:3001")
socket.onopen=function(){
console.log('connect to server')
}
socket.onmessage=function(ev){
console.log(ev.data)
}
var txt1=document.getElementById('txt1')
txt1.onchange=function(){
socket.send(this.value)
}
</script>
</body>
</html>
websock
server.js:(需要安装ws模块,这里主要是使用了node,通过node server.js 命令进行启动)
var WebsocketServer=require('ws').Server;
var wss=new WebsocketServer({
port:3001
})
var sockets=[] //空数组,保存所有socket对象
//当客户端有连接进入的时候会触发connection 事件
wss.on('connection',function(ws){
sockets.push(ws) //将所有的socket对象push进数组中
console.log('服务器端连接建立成功')
ws.on('message',function(msg){//监听事件,当客户端发送信息给服务器时,触发
console.log(msg)
for(var i=0;i<sockets.length;i++){
sockets[i].send(msg)
}
})
ws.on('close',function(){//监听事件,当客户端关闭连接时,触发
for(var i=0;i<sockets.length;i++){
if(sockets[i]==this){ //把关闭连接的websocket对象从sockets数组中移除
sockets.splice(i,1)
break;
}
}
})
})