32 websocket通讯实现

32 websocket通讯实现

写在前面：

php服务端使用的是已经封装好了的workman实现websocket服务端功能

uniapp客户端使用的是uniapp内置的showcketTask api 实现websocket客户端功能

换句话说用的都是别人已经封装好的了。

如果想深入研究建议参考 炎龙的 智能玩具websocket部分视频

一 通讯原理

1 客户端wss请求连接，服务端返回建立连接成功

2 服务端wss向客户端发送客户端的id，并且告诉客户端需要绑定

{
	"type": "bind",
	"data": "7f0000010b5700000004"
}

3 客户端带着自己的user_id ，ajax请求服务端绑定

4 服务端以后根据user_id 向绑定了该user_id 的所有客户端进行发送信息。

5 客户端wss绑定user_id成功后：

• 关于即时通讯功能，以后wss只用于接受服务端的信息

• 客户端以后依旧使用ajax向服务端提交即时通讯信息。

精炼：websocket只接受连接并不接受通讯内容。通过http来的通讯内容经过websoket推送给具体的user_id

二 服务端接口

（wss ）1 监听websocket连接，并且给其返回连接成功，并且再发一条（客户端id，并且要求绑定。）

（http）2 绑定上线，监听客户端请求绑定user_id。

（http）3 接受客户端要发送的聊天内容

• 如果发送内容的收件人在线wss直接发送信息给收件人，http返回ok。 (ps：该php后端并没有存储到数据库中)。
• 如果发送内容的收件人不在线直接缓存到redis里面，http返回ok。 (ps：该php后端并没有把聊天内容存储到数据库中)。

（http）4 判断用户是否在线，从缓存里直接拿出来缓存的未读信息，然后直接给客户端返回。

三 客户端

1 没有登录成功

• 不触发socket事件

2 登录成功后

• 打开socket
• 监听服务端消息
• 绑定用户
• http查看不在线未读消息
• 更新通讯列表，更新与人通讯详情列表，更新未读数下角标

3 app开启的时候，并且已经登录了（绑定服务端+读取未读消息）

• 打开socket
• 监听服务端消息
• 绑定用户
• http查看不在线未读消息
• 更新通讯列表，更新与人通讯详情列表，更新未读数下角标

4 app开启的时候，并且已经登录了（开始接受消息）

ps：getter来处理未读数量问题，好处待定。

一 用户不操作的情况

• 监听服务端消息。
• Index根据ToUser，判断是否正在根这个人聊天
• 第一种：如果和这个人正在聊天，
  • 1 userchat页面$on接受到VUEX传来的信息进行渲染
  • 2 不用更新下角标未读数。
  • 3 更新state里面的两个通讯表
  • 4 更新本地通讯列表
  • 5 更新本地与人通讯详情列表
• 第二种：如果和这个人没有正在聊天（也就是ToUser为空，并且意味着user-chat关闭的）
  • 1 更新下角标未读数。
  • 2 更新本地通讯列表
  • 3 更新本地与人通讯详情列表

二 用户操作的情况

用户察觉到了未读下角标，然后点击该通讯列表的某人：

• 1 action然后点开页面清空下角标。
• 2 action然后打开页面加载与人通讯详情列表，渲染页面。

5 登录了，app已经打开了（发送消息）

• 一定是打开了与某人聊天的页面。
• 然后触发submit事件。
• action里面更新与某个用户的消息记录并存储到本地。
• action里面更新用户通讯表并存储到本地。
• 返回格式化好的数据，http发送到服务端。
• 把发送的信息渲染到与这个人聊天页面。

四 插播async+await

精华：

// 案例：
async xxxx(){
	  setTimeout(()=>{
      console.log('settimeout内部谁都没有等我')
    },4000)
    console.log('xxxx说我并不会等setTimeout')
}
	
async f1(){
  await xxxx() 
  console.log('f1输出')
}

f1()
// 输出：
// xxxx说我并不会等setTimeout
// f1输出
// settimeout内部谁都没有等我

            
				// await xxxx() 
				// await只能保证xxx()产生的promise对象等到了resolve拿到了返回结果（站在函数的角度就是产生了执行到了return）
				// 但是await并不能保证xxx()函数体里面的异步代码也会执行完，
				// 如果想要保证xxx()里面的异步代码也执行完了，需要在xxxx函数内部定制await。
				
				//  xxxx()不写await， 直接返回一个promise对象，并不会在此刻等到执行完函数体代码。
				
				
				
// **精炼**：await 能保证promise拿到resolve，不能保证await的async函数内部异步执行完。

案例：

<template>
	<view>
		<!-- 测试foreach -->
		<!-- <view class="font" click="testList">测试{{list}}</view> -->
		
		<!-- 测试web-view -->
		<!-- <web-view src="/hybrid/html/dongxiao2/index.html" @message="getMes
		sage"></web-view> -->
		
		<button type="default" class="bg-main text-white rounded" style="width: 500rpx;"  @click="func1">点我测试async+await</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// list : [4,3,2,1]
				
			}
		},
		methods: {
			getMessage(e){
				console.log(e)
			},
			testList(){
				
			},
			async func1(){
				console.log('func1')
				await this.func2() 
				// func2本身是个异步函数，也就是func2加括号执行直接返回个promise对象。
				// 如果不写await 直接返回promise对象，并不会等到promise里面的resolve，也就是并不会等到函数体的同步代码执行到最后一行，也就是不会等到return执行。
				// 如果写了await 那么就会等到这个func2的promise对象产生了resolve拿到值，继续往下执行，也就意味着async func2会”完整“执行一遍
				// 前方高能：坑来了！！！！
				
				// 上面提到的“完整”打了引号证明是不对的，注意：那是否可以理解await作用下的 func2已经完整执行完了？答案是错！！！！
				// 来 跟我把视角定位async func2 函数体代码。
				// 思考如下代码func2体里面有异步代码this.func4()，当这个异步只是返回promise对象，就接着往下执行console.log('func2')
				// 并没有等到this.func4()的该promise对象拿到resolve。
				// 也就是func2里的this.func4（）这个异步还没有执行完，就已经开始执行了fun1（）里的this.func3（）
				
				// 结论：
				// 所以await xxxx() 
				// await只能保证xxx()产生的promise对象等到了resolve拿到了返回结果（站在函数的角度就是产生了执行到了return）
				// 但是await并不能保证xxx()函数体里面的异步代码也会执行完，
				// 如果想要保证xxx()里面的异步代码也执行完了，需要在xxxx函数内部定制await。
				
				//  xxxx()不写await， 直接返回一个promise对象，并不会在此刻等到执行完函数体代码。
				
				// **精炼**：await 能保证promise拿到resolve，不能保证await的async函数内部异步执行完。
				
				
				// 执行结果如下：
				// 12:59:04.539 func1 at pages/test2/test2.vue:30
				// 12:59:04.562 func2 at pages/test2/test2.vue:37
				// 12:59:04.586 func3 at pages/test2/test2.vue:41
				// 12:59:06.546 func4 at pages/test2/test2.vue:45
				// 12:59:07.538 func5 at pages/test2/test2.vue:51
			
				
				// 要明白这样只会让func2的代码完整执行完，不会让func2里面的异步代码
				await this.func3()
				
			},
			async func2(){
				this.func4()
				console.log('func2')
			},
			async func3(){
				this.func5()
				console.log('func3')
			},
			async func4(){
				setTimeout(()=>{
					console.log('func4')
				},2000)
				
			},
			async func5(){
				setTimeout(()=>{
					console.log('func5')
				},3000)
			},
			
			
			
			
			
			
		}
	}
</script>

<style>

</style>