序言
What is Webscoket ?
websocket 应用场景
简版群聊实现
代码例子
小结
Webscoket
Websokcet 是一种单个TCP连接上进行全双工通信的协议,通过HTTP/1.1 协议的101状态码进行握手。
Websocket 应用场景
Websocket 和 http 协议都是web通讯协议,两者有何区别?先说Http,它是一种请求响应协议,这种模型决定了,只能客户端请求,服务端被动回答。如果我们有服务端主动推送给客户端的需求怎么办?比如一个股票网站,我们会选择主动轮询,也就是”拉模式“。
大家可以思考下主动轮询带来的问题是什么?
主动轮询其实会产生大量无效请求,增加了服务器压力。
由此,websocket 协议的补充,为我们带来了新的解决思路。
简版群聊实现
利用Websocket 实现一个简陋群聊功能,加深一下Websocket 理解。
- 假设李雷和韩梅梅都登录在线;
- 李雷通过浏览器发送消息转nginx 代理到Ws服务器;
- Ws服务器加载所有在线会话广播消息;
- 韩梅梅接受到消息。
代码例子
后端(shop-server)
引入pom.xml 依赖
1 | <dependency> |
配置类
1 | package com.onlythinking.shop.websocket; |
接受请求端点
1 | package com.onlythinking.shop.websocket; |
聊天业务处理器
1 | package com.onlythinking.shop.websocket.handler; |
前端(shop-web-mgt)
引入依赖
1 | npm install vue-native-websocket --save |
添加Store
1 | import Vue from 'vue' |
编写组件
1 | <template> |
Nginx 代理配置 nginx.conf (如有需要可添加)
1 | map $http_upgrade $connection_upgrade { |
实现效果图
界面比较丑,因为不太擅长,请大家别见笑!!
项目地址
项目演示地址
小结
该篇学习Websocket,以此简单Demo加深印象!