WebSocket前后端建立以及使用-CSDN博客
经过我上一篇的基本理解websocket的建立以及使用后，这篇就写一个简单的demo
实现im聊天
首先就是后端代码，详细解释我都放到了每一句的代码解析了，文章最后我会说怎么运行流程
放置后端代码
package mainimport ("encoding/json""fmt""github.com/gorilla/websocket""gopkg.in/fatih/set.v0""log""net/http""strconv""sync"
)type Message struct {FormId string `json:"userID1"`TargetId string `json:"userID2"`Content string `json:"data"`
}type Node struct {Conn *websocket.ConnDataQueue chan []byte //DataQueue 用于存储待处理的数据，从 WebSocket 连接接收到的消息数据。//set.Interface 是一个集合类型的接口，可以用于实现不同类型的集合，例如包含不重复元素的集合，比如后续可以将多个用户分到同一个组//然后可以对这个一个组内的消息进行遍历然后群发消息。可以理解为并发安全的集合。GroupSets set.Interface
}// 映射关系 通过一个map集合来存储多个用户和节点的映射关系，因为每个用户和服务端建立的websocket连接地址都不同
// 比如ws://localhost:8088/ws?userID1和ws://localhost:8088/ws?userID2等等。。。
var clientMap map[int64]*Node = make(map[int64]*Node, 0)// 读写锁 多个用户在建立连接的时候都要存储到map中，所以这里用一个锁保证读写的安全
var rwLocker sync.RWMutexfunc main() {http.HandleFunc("/ws", Chat)log.Fatal(http.ListenAndServe(":8088", nil))
}// Chat 用来接收用户发起ws连接，以及后续用协程来持续读取消息，并推送给其他用户
func Chat(writer http.ResponseWriter, request *http.Request) {query := request.URL.Query()Id := query.Get("userID")//log.Println("接收到的 userID:", Id)userId, _ := strconv.ParseInt(Id, 10, 64)isvalida := trueconn, err := (&websocket.Upgrader{ //将 HTTP 连接升级为 WebSocket 连接//CheckOrigin 函数用于检查请求的来源是否合法,即允许跨域访问CheckOrigin: func(r *http.Request) bool {return isvalida},}).Upgrade(writer, request, nil) //request 参数包含了客户端发起连接时提供的 URL 信息ws://localhost:8088/useridif err != nil {log.Println("升级为WebSocket连接失败:", err)return}//2.获取connnode := &Node{Conn: conn,DataQueue: make(chan []byte, 50),GroupSets: set.New(set.ThreadSafe),}defer conn.Close()//4. userid 跟 node绑定 并加锁 用程序的读写锁抢占线程资源rwLocker.Lock()clientMap[userId] = noderwLocker.Unlock()//5.用协程完成发送消息推送逻辑go sendProc(node)//6.用协程完成发送消息逻辑go recvProc(node)//这里有点小问题其实，然后用一个select 来阻塞主handle，然后等待协程中的发送消息以及消息推送select {}
}// 5.完成发送逻辑 发送的是消息推送
func sendProc(node *Node) {for {select {//当有人给自己发送了数据后，那么自己的node.DataQueue中就会有数据//然后就可以通过webScoket把自己接收到数据的事情传递给前端。也就是消息推送case data := <-node.DataQueue: //这个同样是阻塞式操作//告诉前端有人私聊自己了，这个消息推送通过websocket发送出去err := node.Conn.WriteMessage(websocket.TextMessage, data)if err != nil {fmt.Println(err)return}}}
}// 6.完成发送消息逻辑
func recvProc(node *Node) {for {//发送操作是前端操作的，即前端将用户A发送的消息内容放置到的websocket中//后端接收数据的data中就包含内容是谁给谁发送的信息。后续可以将这部分数据拆分出来后然后保存到数据库，//使用的是Conn接收的数据，发送的请求，而不是http了_, data, err := node.Conn.ReadMessage()if err != nil {fmt.Println("推送消息失败:", err)break}//用户A发送的消息给解析展示一下var myData Messageerr = json.Unmarshal(data, &myData)if err != nil {log.Println("解析JSON失败:", err)break}fmt.Println("[ws]发送消息:", myData)//用户A发送给别人的消息，要将别人的node.DataQueue中放入消息，然后别人通过sendProc来发送给前端broadMsg(data)}
}func broadMsg(data []byte) {msg := Message{}err := json.Unmarshal(data, &msg)if err != nil {fmt.Println(err)return}str, err := strconv.ParseInt(msg.TargetId, 10, 64)if err != nil {fmt.Println(err)return}//将用户A发送给别人（msg.TargetId）的消息放入到TargetId对应的node.DataQueue中sendMsg(str, data)//后续的扩展暂时不管群发，广播，广播//switch msg.Type {//case strconv.Itoa(1): //私信// sendMsg(int64(msg.TargetId), data)// case 2: //群发// sendGroupMsg()// case 3://广播// sendAllMsg()//case 4:////}
}func sendMsg(TargetId int64, msg []byte) {rwLocker.RLock()//通过接收消息的用户id来找到目标用户的nodenode, ok := clientMap[TargetId] //因为这个方法是接收数据方法下沉过来的，所以接收对象的目的对象就是UserId 所以多个人建立多个对象，也就是都相符了。rwLocker.RUnlock()if ok {//在这个目标用户的node的DataQueue中放入数据，这样如果对方是在线状态的话，它的sendProc函数中就会收到消息，然后推送给前端node.DataQueue <- msg}
}
放置前端代码
用户1 id是123
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="text" id="userID2"><input type="text" id="data"><button onclick="onclicksend()">发送</button ><script>id = 123//与本地计算机通信const ws = new WebSocket('ws://localhost:8088/ws?userID='+id)//与其他计算机通信//const ws = new WebSocket('ws://服务器地址:端口号')function onclicksend(){var userID2= document.getElementById("userID2").value;var data= document.getElementById("data").value;var sendData = {userID1: ""+id,userID2: userID2,data: data};console.log(sendData);var jsonStr = JSON.stringify(sendData);ws.send(jsonStr);}ws.onopen = function () {console.log('我们连接成功啦...')// ws.send(11);}ws.onerror = function () {console.log('连接失败了...')}ws.onmessage = function (e) {console.log('服务端传来数据啦...' + e.data)}ws.onclose = function () {console.log('连接关闭了...')}</script>
</body>
</html>
用户2 id是456
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="text" id="userID2"><input type="text" id="data"><button onclick="onclicksend()">发送</button ><script>id = 456//与本地计算机通信const ws = new WebSocket('ws://localhost:8088/ws?userID='+id)//与其他计算机通信//const ws = new WebSocket('ws://服务器地址:端口号')function onclicksend(){var userID2= document.getElementById("userID2").value;var data= document.getElementById("data").value;var sendData = {userID1: ""+id,userID2: userID2,data: data};console.log(sendData);var jsonStr = JSON.stringify(sendData);ws.send(jsonStr);}ws.onopen = function () {console.log('我们连接成功啦...')// ws.send(11);}ws.onerror = function () {console.log('连接失败了...')}ws.onmessage = function (e) {console.log('服务端推送数据: ' + e.data)}ws.onclose = function () {console.log('连接关闭了...')}</script>
</body>
</html>
运行的时候老样子，先运行后端服务器，然后再运行前端两个页面然后打开控制台看聊天
前端页面很简单就是两个text框，第一个是给目标用户id发信息，第二个是发送的信息内容
经过测试就会知道比如左边的页面：用户456给用户123发信息的时候左边的控制台也会输出内容
这样之后进行包装，将控制台打印的内容放到一个聊天页面就可以实现im聊天了。
![[算法][单调栈] [leetcode]316. 去除重复字母](https://img-blog.csdnimg.cn/direct/8c8d9331903e41c1a467a886fda7cb2e.gif#pic_center)
