Golang websocket 聊天室

Submitted by Lizhe on Tue, 01/05/2021 - 07:31

 

20210105030147

/Users/lizhe/works/aus/alivediochat/go.mod

 

module alivediochat

 

go 1.14

 

require (

github.com/tidwall/gjson v1.6.0

github.com/tidwall/sjson v1.1.1

golang.org/x/net v0.0.0-20201224014010-6772e930b67b

 

)

 /Users/lizhe/works/aus/alivediochat/main.go

 

index.html

 

<!DOCTYPE html>

<html lang="en">

 

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<link rel="icon" href="./favicon.ico" type="image/x-icon" />

<title>在线QA</title>

<style type="text/css">

.talk_con {

width: 100%;

height: 100%;

border: 1px solid #666;

margin: 50px auto 0;

background: #f9f9f9;

}

 

.talk_show {

width: 100%;

height: 420px;

border: 1px solid #666;

background: #fff;

margin: 10px auto 0;

overflow: auto;

}

 

.talk_input {

width: 100%;

}

 

.talk_word {

width: 90%;

height: 26px;

float: left;

text-indent: 10px;

margin: 2% 5%;

}

 

.talk_sub {

width: 100%;

height: 30px;

float: left;

}

 

.atalk {

margin: 10px;

}

 

.atalk span {

display: inline-block;

background: #0181cc;

border-radius: 10px;

color: #fff;

padding: 5px 10px;

}

 

.btalk {

margin: 10px;

text-align: right;

}

 

.btalk span {

display: inline-block;

background: #ef8201;

border-radius: 10px;

color: #fff;

padding: 5px 10px;

}

</style>

<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript">

$(function () {

// 询问框获取用户昵称

let username = localStorage.getItem("username") ?

localStorage.getItem("username") : disp_prompt();

let words = $("#words");

let talkWords = $("#talkwords");

let talkSubmit = $("#talksub");

// webSocket

let wsURL = "ws://alipoc.dev.awspactera.com:8010/webSocket";

ws = new WebSocket(wsURL);

try {

// 监听连接服务器

ws.onopen = function () {

console.log("已连接服务器")

let request = { "username": username, "message": " 已经加入聊天" };

ws.send(JSON.stringify(request));

};

 

// 监听关闭服务器

ws.onclose = function () {

if (ws) {

ws.close();

ws = null

}

console.log("关闭服务器连接")

};

 

// 监听信息

ws.onmessage = function (result) {

let data = JSON.parse(result.data);

let className = "atalk";

let user = data.username

// 如果是本人,放在右边 不是本人 放在左边

if (data.username === username) {

className = "btalk";

user = "";

}

str = words.html() +

'<div class=" + className + ">' + user + ':<span>'

+ data.message + '</span></div>';

words.html(str);

var scrollHeight = words.prop("scrollHeight");

words.scrollTop(scrollHeight);

console.log("开始监听消息")

};

 

// 监听错误

ws.onerror = function () {

if (ws) {

ws.close();

ws = null;

}

console.log("服务器连接失败")

}

} catch (e) {

console.log(e.message)

}

 

document.onkeydown = function (event) {

let e = event || window.event;

if (e && e.keyCode === 13) { //回车键的键值为13

talkSubmit.click()

}

};

 

talkSubmit.click(function () {

// 获取输入框内容

let content = talkWords.val();

if (content === "") {

// 消息为空时弹窗

alert("消息不能为空");

return;

}

 

// 发送数据

if (ws == null) {

alert("连接服务器失败,请刷新页面");

window.location.reload();

return

}

let request = { "username": username, "message": content };

ws.send(JSON.stringify(request));

// 清空输入框

talkWords.val("")

})

});

 

function disp_prompt() {

let username = prompt("请输入昵称");

if (username == null || username === "") {

disp_prompt()

} else {

localStorage.setItem("username", username);

return username;

}

}

</script>

</head>

 

<body>

<h1>在线QA</h1>

<div class="talk_con">

<div class="talk_show" id="words">

 

</div>

<div class="talk_input">

<input type="text" class="talk_word" id="talkwords" placeholder="输入聊天内容">

<input type="button" value="发送" class="talk_sub" id="talksub">

</div>

</div>

</body>

 

</html>

/Users/lizhe/works/aus/alivediochat/Dockerfile

 

FROM golang:alpine as golang

 

RUN mkdir -p /root/vedioChat

RUN mkdir -p /root/vedioChat/output

COPY ./ /root/vedioChat

 

WORKDIR /root/vedioChat/output

RUN go build /root/vedioChat/main.go


 

FROM alpine as alpine

 

RUN mkdir -p /root/vedioChat

COPY --from=golang --chown=root:root /root/vedioChat/output /root/vedioChat

COPY --from=golang --chown=root:root /root/vedioChat/static /root/vedioChat/static

 

WORKDIR /root/vedioChat

CMD /root/vedioChat/main