Go实现Websocket消息推送
tuzisir · · 4917 次点击 · · 开始浏览1.websocket 简介
以往浏览器要获取服务端数据,都是通过发送 HTTP 请求,然后等待服务端回应的。也就是说浏览器端一直是整个请求的发起者,只有它主动,才能获取到数据。而要让浏览器一侧能够获取到服务端的实时数据,就需要不停地向服务端发起请求。虽然大多数情况下并没有获取到实际数据,但这大大增加了网络压力,对于服务端来说压力也直线上升。
image.png
由于 WebSocket 是全双工通信,所以当建立了 WebSocket 连接之后,接下来的通信就类似于传统的 TCP 通信了。客户端和服务端可以相互发送数据,不再有实时性的问题。
image.png
2.开发包的选择
在 Go 官方的 SDK 中,并不包含对 WebSocket 的支持,所以必须使用第三方库。
要使用 Golang 开发 WebSocket,选择基本就在 x/net/websocket 和 gorilla/websocket 之间。《Go Web 编程》一书中的例子使用了x/net/websocket作为开发包,而且貌似它也更加官方且正式。而实际根据我在网上查询得到的反馈看来,并非如此。x/net/websocket貌似 Bug 较多,且较为不稳定,问题解决也并不及时。相比之下,gorilla/websocket则更加优秀。
下载链接及手册
3.推送服务实现
server 启动以后会注册两个 Handler。
websocketHandler 用于提供浏览器端发送 Upgrade 请求并升级为 WebSocket 连接。 pushHandler 用于提供外部推送端发送推送数据的请求。
3-1.go代码的简单实现
package main
import (
"net/http"
"log"
"github.com/gorilla/websocket"
)
var (
upgrader = websocket.Upgrader {
// 读取存储空间大小
ReadBufferSize:1024,
// 写入存储空间大小
WriteBufferSize:1024,
// 允许跨域
CheckOrigin: func(r *http.Request) bool {
return true
},
}
)
func wsHandler(w http.ResponseWriter, r *http.Request) {
var (
wbsCon *websocket.Conn
err error
data []byte
)
// 完成http应答,在httpheader中放下如下参数
if wbsCon, err = upgrader.Upgrade(w, r, nil);err != nil {
return // 获取连接失败直接返回
}
for {
// 只能发送Text, Binary 类型的数据,下划线意思是忽略这个变量.
if _, data, err = wbsCon.ReadMessage();err != nil {
goto ERR // 跳转到关闭连接
}
if err = wbsCon.WriteMessage(websocket.TextMessage, data); err != nil {
goto ERR // 发送消息失败,关闭连接
}
}
ERR:
// 关闭连接
wbsCon.Close()
}
func main() {
// 当有请求访问ws时,执行此回调方法
http.HandleFunc("/ws",wsHandler)
// 监听127.0.0.1:7777
err := http.ListenAndServe("0.0.0.0:7777", nil)
if err != nil {
log.Fatal("ListenAndServe", err.Error())
}
}
3-2.前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*{
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<div style="margin-left:400px">
<h3>群聊天室</h3>
<div style="border:1px solid;width: 600px;height: 300px;">
<div id="msgArea" style="width:100%;height: 100%;text-align:start;resize: none;font-family: 微软雅黑;font-size: 20px;overflow-y: scroll"></div>
</div>
<div style="border:1px solid;width: 600px;height: 100px;">
<div style="width:100%;height: 100%;">
<textarea id="userMsg" style="width:100%;height: 100%;text-align:start;resize: none;font-family: 微软雅黑;font-size: 20px;"></textarea>
</div>
</div>
<div style="border:1px solid;width: 600px;height: 25px;">
<button style="float: right;" onclick="sendMsg()">发送</button>
</div>
</div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
var ws;
$(function(){
link();
})
function link () {
ws = new WebSocket("ws://127.0.0.1:7777/ws");//连接服务器
ws.onopen = function(event){
console.log(event);
alert('连接了');
};
ws.onmessage = function (event) {
var date = new Date();
var msg = "<p>"+date.toLocaleString()+"</p>"+"<p>"+event.data+"</p>";
$("#msgArea").append(msg);
}
ws.onclose = function(event){alert("已经与服务器断开连接\r\n当前连接状态:"+this.readyState);};
ws.onerror = function(event){alert("WebSocket异常!");};
}
function sendMsg(){
var msg = $("#userMsg").val();
ws.send(msg);
}
</script>
3-3. 结果分析
运行的结果
image.png
交互的过程
1.request请求时,要求将协议升级为websocket 参数
2.response返回时,如果成功则返回websocket 参数
image.png
数据传送形式是把数据拆成多个frame进行发送和接收,这个不用我们关心。
image.png
image.png
4.第三方资源
https://www.imooc.com/video/17599
https://www.cnblogs.com/snowInPluto/p/8688453.html
5.PHP前沿学习群: 257948349 go也收
有疑问加站长微信联系(非本文作者)
入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889
关注微信- 请尽量让自己的回复能够对别人有帮助
- 支持 Markdown 格式, **粗体**、~~删除线~~、
`单行代码` - 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
- 图片支持拖拽、截图粘贴等方式上传
收入到我管理的专栏 新建专栏
1.websocket 简介
以往浏览器要获取服务端数据,都是通过发送 HTTP 请求,然后等待服务端回应的。也就是说浏览器端一直是整个请求的发起者,只有它主动,才能获取到数据。而要让浏览器一侧能够获取到服务端的实时数据,就需要不停地向服务端发起请求。虽然大多数情况下并没有获取到实际数据,但这大大增加了网络压力,对于服务端来说压力也直线上升。
image.png
由于 WebSocket 是全双工通信,所以当建立了 WebSocket 连接之后,接下来的通信就类似于传统的 TCP 通信了。客户端和服务端可以相互发送数据,不再有实时性的问题。
image.png
2.开发包的选择
在 Go 官方的 SDK 中,并不包含对 WebSocket 的支持,所以必须使用第三方库。
要使用 Golang 开发 WebSocket,选择基本就在 x/net/websocket 和 gorilla/websocket 之间。《Go Web 编程》一书中的例子使用了x/net/websocket作为开发包,而且貌似它也更加官方且正式。而实际根据我在网上查询得到的反馈看来,并非如此。x/net/websocket貌似 Bug 较多,且较为不稳定,问题解决也并不及时。相比之下,gorilla/websocket则更加优秀。
下载链接及手册
3.推送服务实现
server 启动以后会注册两个 Handler。
websocketHandler 用于提供浏览器端发送 Upgrade 请求并升级为 WebSocket 连接。 pushHandler 用于提供外部推送端发送推送数据的请求。
3-1.go代码的简单实现
package main
import (
"net/http"
"log"
"github.com/gorilla/websocket"
)
var (
upgrader = websocket.Upgrader {
// 读取存储空间大小
ReadBufferSize:1024,
// 写入存储空间大小
WriteBufferSize:1024,
// 允许跨域
CheckOrigin: func(r *http.Request) bool {
return true
},
}
)
func wsHandler(w http.ResponseWriter, r *http.Request) {
var (
wbsCon *websocket.Conn
err error
data []byte
)
// 完成http应答,在httpheader中放下如下参数
if wbsCon, err = upgrader.Upgrade(w, r, nil);err != nil {
return // 获取连接失败直接返回
}
for {
// 只能发送Text, Binary 类型的数据,下划线意思是忽略这个变量.
if _, data, err = wbsCon.ReadMessage();err != nil {
goto ERR // 跳转到关闭连接
}
if err = wbsCon.WriteMessage(websocket.TextMessage, data); err != nil {
goto ERR // 发送消息失败,关闭连接
}
}
ERR:
// 关闭连接
wbsCon.Close()
}
func main() {
// 当有请求访问ws时,执行此回调方法
http.HandleFunc("/ws",wsHandler)
// 监听127.0.0.1:7777
err := http.ListenAndServe("0.0.0.0:7777", nil)
if err != nil {
log.Fatal("ListenAndServe", err.Error())
}
}
3-2.前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*{
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<div style="margin-left:400px">
<h3>群聊天室</h3>
<div style="border:1px solid;width: 600px;height: 300px;">
<div id="msgArea" style="width:100%;height: 100%;text-align:start;resize: none;font-family: 微软雅黑;font-size: 20px;overflow-y: scroll"></div>
</div>
<div style="border:1px solid;width: 600px;height: 100px;">
<div style="width:100%;height: 100%;">
<textarea id="userMsg" style="width:100%;height: 100%;text-align:start;resize: none;font-family: 微软雅黑;font-size: 20px;"></textarea>
</div>
</div>
<div style="border:1px solid;width: 600px;height: 25px;">
<button style="float: right;" onclick="sendMsg()">发送</button>
</div>
</div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
var ws;
$(function(){
link();
})
function link () {
ws = new WebSocket("ws://127.0.0.1:7777/ws");//连接服务器
ws.onopen = function(event){
console.log(event);
alert('连接了');
};
ws.onmessage = function (event) {
var date = new Date();
var msg = "<p>"+date.toLocaleString()+"</p>"+"<p>"+event.data+"</p>";
$("#msgArea").append(msg);
}
ws.onclose = function(event){alert("已经与服务器断开连接\r\n当前连接状态:"+this.readyState);};
ws.onerror = function(event){alert("WebSocket异常!");};
}
function sendMsg(){
var msg = $("#userMsg").val();
ws.send(msg);
}
</script>
3-3. 结果分析
运行的结果
image.png
交互的过程
1.request请求时,要求将协议升级为websocket 参数
2.response返回时,如果成功则返回websocket 参数
image.png
数据传送形式是把数据拆成多个frame进行发送和接收,这个不用我们关心。
image.png
image.png
4.第三方资源
https://www.imooc.com/video/17599
https://www.cnblogs.com/snowInPluto/p/8688453.html