In order to make remote work unaffected, I wrote an internal chat room | community essay

socket It's also called “ Socket ”, Used to describe IP Address and port , Is a handle to a communication chain . It can be used to realize the communication between different virtual machines or different computers . Two programs on the network realize data exchange through a two-wire communication connection , One end of this connection is called a socket.

WebSocket Is based on TCP A new network protocol , it

It realizes full duplex communication between browser and server

 ——  Allow the server to actively send information to the client . and HTTP Of Request The request is different , In the realization of websocket In the process of connecting , Browser needs to issue websocket Connection request , Then the server responds , This process is often said “ handshake ”.

stay websocket API in , All browsers and servers need to do is shake hands , Then there is a fast track between the browser and the server .

websocket Generally used in “ Client and server interact closely and extremely frequently ” In the scene of （ such as ： End to end chat and online games ）. Open the data path between the two , Instead of launching a regular http request （ polling ）.

// Start a socket Code （ client ）
wx.connectSocket({
 // Connect a socket
 url:'wss://example.qq.com',
 data:{},
 header:{
 'content-type':'application/json'
 },
 protocols:['protocol1'],
 method:'GET'
})


On the surface , Much like a normal request , But its uniqueness lies in ： The request successfully connected to a socket in the future , This connection will be maintained , And ordinary. get/post Wait for the request to follow http And disconnect .

Now , You can call

wx.onSocketOpen

This API monitor websocket Connection open event ：

wx.onSocketOpen(function(res){
 console.log('WebSocket Connection is open ！');
})


When one socket After opening , The most important content is through the socket Send a required message —— It needs to use API：

wx.sendSocketMessage

; Of course , This “ send out ” Must be in “ open ”（ The callback success） after （WePY It's in then after ）：

wx.onSocketOpen(function(res){
 wx.sendSocketMessage({
 data:msg
 })
})


（ However, it is not written in this way in practice , On the page Load in init“Open”,open To take receive, This send Instead, it is called in a specific listening event ）

Now that it has been sent , You have to accept messages from the server （ Otherwise how “ dialogue ” ah ~）： In the open socket after , You can call

wx.onSocketMessage

 API To receive message events from the server

wx.onSocketMessage(function(res){
 console.log(' Received a message from the server ：'+res.data)
})


In the process of sending and receiving messages , Some mistakes are inevitable for some reason —— For example, the client device cannot be opened socket、 Or the network drops / Delay 、 Or there are too many requests from the server, causing congestion ... It's time to “ Manual ” Prompt the developer or user ：

wx.onSocketError(function(res){
 console.log('websocket Connection open failed , Please check the system and network ！');
})


Last , We finished one socket Connect , Users don't have to , Then disconnect in time  ——  A server receives and hosts a limited number of connections , Breaking unwanted links in time can greatly reduce the pressure on the server , Reduce the waste of resources ：

wx.onSocketClose(function(res){
 console.log('websocket Connection closed ！');
})


Let's summarize the above knowledge points and practice ：

npm install -g ws


Global installation websocket Use of npm package .

After installation , Create a new server.js file ：

const WebsocketServer=require('ws').Server;
let wbsocketServer=new WebsocketServer({
 port:8081,
 autoAcceptConnections:true
})

let clients=[]
let connectNum=0
// Listen for connections and messages
wbsocketServer.on('connection',(ws)=>{
 clients.push(ws);
 ++connectNum;
 console.log(' Number of connections ：'+connectNum);

 ws.on('message',(message)=>{
 let objMessage=JSON.parse(message);
 console.log(objMessage.data);
 // You can do some processing or forward to other clients
 
 })
 // Send messages randomly
 setInterval(()=>{
 if(connectNum!==0){
 setTimeout(()=>{
 // Get the latest connections from the connection pool
 clients[clients.length-1].send(JSON.stringify({data:' Messages from the server '}))
 },Math.random()*1000*3)
 }else{
 console.log(' No client connection ')
 }
 },10000)
 
 ws.on('close',()=>{
 console.log(' The connection is disconnected ');
 // Delete unwanted connections —— It's usually “ The oldest ” A piece of data
 clients.pop();
 --connectNum;
 })
})


After that, you can use

nodemon server.js

Command to start the server .

When developing small programs, you must check “ Legal domain name not verified ...” This one

Client development ——WePY

npm install wepy-cli -g

wepy init standard chat
-- Created a chat project , After basic configuration , Enter this directory

npm i

-- Generate 、 Monitoring applet
wepy build -watch


stay app.wpy Of documents config Add a new... In the configuration chat page , And turn it on promisify, And in pages Create under folder chat.wpy file . Modify as follows ：

// Turn on promisify
constructor{
 super();
 this.use('requestfix');
 this.use('promisify');
}
pages:[
 'pages/chat'
],


It is the same as the general wechat applet

<block></block>

, We can use an array to store conversations , While using

<repeat></repeat>

Cycle through the chat content .chat.wpy -> template

<template>
 <view class=&quot;page&quot;>
 <view class=&quot;chats&quot;>
 <repeat for=&quot;{{chats}}&quot; item=&quot;item&quot;>
 <view style=&quot;font-size:20rpx;color:#ababab&quot;>{{item.item}}</view>
 <view style=&quot;font-size:25rpx;padding-bottom:20rpx;&quot;>{{item.text}}</view>
 </repeat>
 </view>
 <view class=&quot;chatInput&quot;>
 <input placeholder=&quot; Please input chat content &quot; bindinput=&quot;userSay&quot; />
 </view>
 <button @tap=&quot;sendMessage&quot; size=&quot;mini&quot; class=&quot;btn&quot;> Send a message </button>
 </view>
</template>


chat.wpy -> style

<style lang=&quot;less&quot;>
 .page{
 position:fixed;
 height:100vh;
 width:100vw;
 background:#e8e9d2;
 }
 .chats{
 text-align:center;
 margin:10vh 10vh 10vw 10vw;
 height:65vh;
 width:80vw;
 background-color:aliceblue;
 overflow:auto;
 }
 .chatInput{
 background:aliceblue;
 height:40rpx;
 font-size:20rpx;
 padding:10rpx;
 width:70vw;
 margin-left:15vw;
 border-radius:20rpx;
 margin-bottom:3vh;
 }
 .btn{
 width:70vw;
 mnargin-left:15vw;
 }
</style>


chat.wpy -> js/script

<script>
 import wepy from 'wepy'
 // Monitors whether the status quantity is open
 let socketOpen=false
 export default class chat extends wepy.page{ //wepy Fixed format in
 data={
 say:'',
 chats:[
 {time:' Chat start ',text:''}
 ]
 }
 methods={
 // User input related
 userSay(e){
 this.say=e.detail.value
 this.$apply()
 },
 // Send conversation
 sendMessage(){
 let time=new Date()
 this.chats=this.chats.concat([time:time.toLocaleTimeString(),text:' I said, ：'+this.say])
 this.handleSendMessage()
 this.$apply()
 }
 }
 // Start a socket
 startSocket(){
 wepy.connectSocket({
 url:'ws://127.0.0.1:8081'
 })
 }
 wssInit(){
 const that=this
 this.startSocket()
 // Connection failure displays
 wepy.onSocketError(function(res){
 socketOpen=false
 console.log('websocket Connection open failed , Please check ！',res)
 setTimeout(()=>{
 that.startSocket()
 },2000)
 })
 // Monitor connection successful
 wepy.onSocketOpen(function(res){
 socketOpen=true
 console.log('websocket Connection is open ')
 // Receiving messages from the server
 that.receiveMessage()
 })
 }
 receiveMessage(){
 const that=this
 if(socketOpen){
 console.log(' Read socket The server ...')
 wepy.onSocketMessage(function(res){
 let time=new Date()
 let resData=JSON.parse(res.data)
 if(resData.data){
 that.chats=that.chats.concat([{time:time.toLocaleTimeString(),text:' The server said ：'+resData.data}])
 that.$apply()
 }
 })
 }else{
 // The unopened state requires delayed reconnection
 console.log(' The server is not connected ')
 setTimeout(()=>{
 that.receiveMessage()
 },2000)
 }
 }
 // Send a message
 handleSendMessage(){
 const that=this
 wepy.sendSocketMessage({
 data:JSON.stringify({data:that.say})
 })
 }
 events={}

 onLoad(){
 const that=this
 setTimeout(()=>{
 that.wssInit()
 },1000)
 }
 }
</script>