实时聊天-go语言从入门到放弃

image

项目 例子已发布到 github 欢迎 Star

项目地址

安装篇

windows

下载地址

image

一路狂点 next

image

检查是否安装成功 命令行输入

 go version
image

mac

方法一

brew install go
image

方法二 比较快

下载

image

安装

image

验证

image

万能的 hello word

创建 hello.go 文件

package main

import "fmt"

func main() {
   fmt.Println("Hello, World!")
}

运行

go run hello.go
image

运行

go build hello.go
./hello
image

VsCode 扩展

image

镜像代理-Goproxy 中国

环境变量

vim ~/.zshrc 或者 vim .bash_profile

export GOROOT=/usr/local/go
# 项目目录
export GOPATH=~/go  
export PATH=${PATH}:$GOPATH/bin

执行 source ~/.zshrc 或 source ~/.bash_profile 生效

检查命令

go env

WebSocket

WebSocket 协议在2008年诞生,2011年成为国际标准。所有浏览器都已经支持了。

它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种。

github.com/gorilla/websocket

go的 websocket 库

获取方式

go get github.com/gorilla/websocket

使用文档

进入主题

项目结构

  • realTimeChat
    • src
      • main.js
    • web
    • go.mod

src 为 go程序目录
web // vue-cli 构建的项目
go.mod 是 依赖包的管理(记录和解析对其他模块的依赖性)

生成方式 执行以下命令

cd RealTimeChat
go mod init src // init 后 跟 main.js所在的目录名称

web 项目创建 请移动至

vue-cli 搭建项目之 项目创建和基本配置

主程序 main.go

package main

import (
    "encoding/json" // json格式化
    "fmt"
    "net/http" // http 服务

    "github.com/gorilla/websocket"
)

// map 映射,其键对应是一个指向 WebSocket 的指针,其值就是一个布尔值。我们实际上并不需要这个值,但使用的映射数据结构需要有一个映射值,这样做更容易添加和删除单项。
var clients = make(map[*websocket.Conn]bool)

// 由客户端发送消息的队列
var broadcast = make(chan Message)

// Upgrader 用于升级 http 请求,把 http 请求升级为长连接的 WebSocket
var upgrader = websocket.Upgrader{
    // 解决跨域问题
    CheckOrigin: func(r *http.Request) bool {
        return true
    },
}

// 客户端唯一id
type userInfo struct {
    UserId string
    Code   string
}

// 用户信息+消息内容
type Message struct {
    Msg      string `json:"msg"`
    Username string `json:"username"`
}

// Upgrade 函数将 http 升级到 WebSocket 协议
func handler(w http.ResponseWriter, r *http.Request) {
    ws, err := upgrader.Upgrade(w, r, nil)
    // 获取id
    var info userInfo
    info.UserId = ws.RemoteAddr().String()
    info.Code = "auth"
    data, _ := json.Marshal(info)
    // 下发id
    ws.WriteMessage(websocket.TextMessage, []byte(string(data)))
    fmt.Println("用户:", ws.RemoteAddr().String(), "加入")
    if err != nil {
        fmt.Println(err)
        return
    }
    // 退出时关闭连接
    defer ws.Close()
    // 把新的客户端添加到全局的 "clients" 映射表中进行注册
    clients[ws] = true
    // 处理WebSocket的先消息
    for {
        var msg Message
        // 从连接中读取下一个JSON编码的消息,并将其存储在msg指向的值中。
        err := ws.ReadJSON(&msg)
        if err != nil {
            fmt.Println(err)
            delete(clients, ws)
            break
        }
        // 将新接收到的消息发送到广播频道
        broadcast <- msg
    }
}

// 广播消息
func handleMessages() {
    for {
        // 从“broadcast”中连续读取数据
        msg := <-broadcast
        // 通过各自的 WebSocket 连接将消息传播到所有客户端
        for client := range clients {
            fmt.Println('2')
            // WriteJSON将msg的JSON编码写为消息
            err := client.WriteJSON(&msg)
            if err != nil {
                fmt.Println(err)
                client.Close()
                delete(clients, client)
            }
        }
    }
}

func main() {

    // 打印输出信息。
    fmt.Println("ListenAndServe: 8000")

    // http 服务
    http.HandleFunc("/ws", handler)

    go handleMessages()

    err := http.ListenAndServe(":8000", nil)

    if err != nil {
        fmt.Println("ListenAndServe")
        fmt.Println(err)
    }
}

src 目录下运行

go run main.go

web vue主逻辑

...
mounted() {
    var self = this;
    this.ws = new WebSocket('ws://localhost:8000/ws');
    // 接收消息
    this.ws.addEventListener('message', function(e) {
        var res = JSON.parse(e.data);
        // 判断 是否为 下发唯一用户id
        if(res.Code === 'auth'){
          self.form.username = res.UserId.replace(RegExp('\\[::1]:', 'g'), '')
          self.upUSER_ID(self.form.username)
          return
        }
        // 消息类型,自己还是别人,right 是自己
        var type = res.username == self.userid ? 'right' : 'left'
        // 存储消息 到 store
        self.addMessage(Object.assign({
          type: type
        },res))
    });
},
methods:{
    ...mapActions('user', ['upUSER_ID']),
    ...mapActions('message', ['addMessage']),
    // 发送消息
    submit() {
      this.ws.send(
        JSON.stringify({
          msg: this.form.msg,
          username: this.form.username
      }));
      this.form.msg = ''
    },  
}
...

效果图

go run main.go
ListenAndServe: 8000
用户: [::1]:55023 加入
用户: [::1]:55055 加入
websocket: close 1001 (going away)
用户: [::1]:55062 加入
image

未完待续,功能做的比较简易,之前设想的 注册登录, 好友列表,聊天记录,发送私信 ,因时间有限 还没来得及实现,后续后继续完善

欢迎在评论区留言,可以的话

image

我的博客

我的掘金

我的简书

Laravel China

我的微信公众号