首页 > 其他分享 >WebSocket搭建一个简单的聊天室

WebSocket搭建一个简单的聊天室

时间:2023-07-18 21:03:44浏览次数:59  
标签:聊天室 websocket err http item chat WebSocket com 搭建

这个例子比较简单:

  • 只有一个聊天室,大家进入的都是同一个聊天室。 
  • 没有用户登录,用户登录直接根据id给出匿名用户。

程序截图,UI我直接用的 https://github.com/Niessy/websocket-golang-chat 这里给的例子的Html代码。

WebSocket搭建一个简单的聊天室_html

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

服务器端Golang代码:

package main
 
import (
    "code.google.com/p/go.net/websocket"
    "container/list"
    "fmt"
    "html/template"
    "log"
    "net/http"
"os"
)
 
const (
"localhost:4000" // server address
)
 
var (
    pwd, _        = os.Getwd()
+ "/chat.html"))
*list.List
int
)
 
// RootHandler renders the template for the root page
func RootHandler(w http.ResponseWriter, req *http.Request) {
:=
if err != nil
        http.Error(w, err.Error(), http.StatusInternalServerError)
    }
}
 
// WebSocket server to handle chat between clients
func SockServer(ws *websocket.Conn) {
var err error
var clientMessage string
 
    // cleanup on server side
defer func() {
if err = ws.Close(); err != nil
"Websocket could not be closed", err.Error())
        }
    }()
:=
"Client connected:", client)
++
:=
 
:= fmt.Sprintf("guest %d", id)
"Client username:", clientUserName)
 
:=
defer
 
nil, fmt.Sprintf("welcome %s join\n", clientUserName))
 
    // for loop so the websocket stays open otherwise
    // it'll close after one Receieve and Send
for
if err = websocket.Message.Receive(ws, &clientMessage); err != nil
            // If we cannot Read then the connection is closed
"Websocket Disconnected waiting", err.Error())
"Number of clients still connected ...", activeClients.Len())
return
        }
"%s %s > %s", client, clientUserName, clientMessage)
        fmt.Println(clientMessage)
        SendMessage(ws, clientMessage)
    }
}
 
func SendMessage(self *websocket.Conn, data string) {
for item := activeClients.Front(); item != nil; item = item.Next() {
:= item.Value.(*websocket.Conn)
if
            panic("item not *websocket.Conn")
        }
 
if item.Value ==
continue
        }
        websocket.Message.Send(ws, data)
    }
}
 
// Initialize handlers and websocket handlers
func
"/", RootHandler)
"/sock", websocket.Handler(SockServer))
}
 
func
    activeClients = list.New()
:= http.ListenAndServe(listenAddr, nil)
if err != nil
panic("ListenAndServe: " +
    }
}

页面模版(chat.html)

使用模版就是为了避免服务器地址在多个地方配置,只要在一个地方配置即可。

<!DOCTYPE html>
<html>
    <head>
<meta charset="utf-8"/>
<title> WebSockets </title>
<style>
*
padding: 0px;
margin: 0px;
            }
body
width:100%;
font-family: fantasy;
font-size: 13px;
            }
h1
text-align: center;
            }
#text
position: relative;
left: 500px;
top: 20px;
            }
            #chat-box-container {
width: 600px;
height: 100%;
position: relative;
left: 500px;
top: 50px;
            }
#chatbox
position: relative;
right: 150px;
border-style: solid;
border-radius: 2px;
padding: 10px;
            }
</style>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
try
var sock = new WebSocket("ws://{{.}}/sock");
                //sock.binaryType = 'blob'; // can set it to 'blob' or 'arraybuffer 
"Websocket - status: " +
= function(m) { 
"CONNECTION opened..." + this.readyState);}
= function(m) { 
'#chatbox').append('<p>' + m.data + '</p>');}
= function(m) {
"Error occured sending..." +
= function(m) { 
"Disconnected - status " + this.readyState);}
catch(exception) {
                console.log(exception);
            }
        </script>
    </head>
    <body>
<h1> This chat is powered by web sockets </h1>
<div id ="text">
<textarea id="textin" cols="30" rows="4" placeholder="This is where you type..." autofocus>
        </textarea>
<button id="send">Send Message</button>
</div>
 
        <divid="chat-box-container">
<h2> This is the chatbox... </h2>
<div id="chatbox">
<p> Go Type stuff... </p>
</div>
</div>
 
<script>
'#textin').val("");
            // take what's the textbox and send it off
'#send').click( function(event) {
var txt = $('#textin').val()
                sock.send(txt);
'#textin').val("");
'#chatbox').append('<p> I said ' + txt + '</p>');
            });
        </script>
    </body>
</html>

参考资料:

一个Go语言实现的聊天室。
https://github.com/square/SocketRocket/blob/master/TestChatServer/go/chatroom.go

websocket-golang-chat
https://github.com/Niessy/websocket-golang-chat

使用 Go 语言和 HTML5 WebSocket 构建一个 Web 聊天室http://theplant.jp/en/blogs/10-techforce-building-a-web-chat-with-the-go-programming-language-and-html5-websockets
https://github.com/kobeld/gochatting 

在golang中,html5,使用websocket,建立一个最简单的高并发web聊天室
http://www.cppblog.com/AutomateProgram/archive/2012/12/20/196481.html

jmcvetta / tokenizerd  A data tokenization server
https://github.com/jmcvetta/tokenizerd

Implementing Chat with WebSockets and Go
http://gary.beagledreams.com/page/go-websocket-chat.html

golang websocket 简易聊天室
http://www.dotcoo.com/golang-websocket-chatroom

Polemo Chat客户端行为
 

标签:聊天室,websocket,err,http,item,chat,WebSocket,com,搭建
From: https://blog.51cto.com/u_15588078/6768248

相关文章

  • Go语言用WebSocket的简单例子
    Go语言标准包里面没有提供对WebSocket的支持,但是在由官方维护的go.net子包中有对这个的支持,需要独立下载, Gowebsocketpackage下载地址:http://code.google.com/p/go.net/websocket。Goget命令下载:gogetcode.google.com/p/go.net/websocket Go实现的WebSocket的文档:http://......
  • Nginx 代理 WebSocket 、TCP协议
    Nginx代理WebSocket什么是WebSocketWebSocket是一种网络传输协议,可在单个TCP连接上进行全双工通信,位于OSI模型的应用层。WebSocket中的握手和HTTP中的握手过程兼容,且可以使用HTTP中的Upgrade协议头将连接从HTTP升级到WebSocket。代理结构WebSocket可以工作在......
  • 搭建本地ChatGPT
    -1下载并安装Docker【官网下载】2使用开源项目:潘多拉(Pandora)【github】3一键安装命令:dockerpullpengzhile/pandora启动端口:8899dockerrun-ePANDORA_CLOUD=cloud-ePANDORA_SERVER=0.0.0.0:8899-p8899:8899-dpengzhile/pandora4获取自己的......
  • 如何通过smardaten无代码开发平台快速搭建数据中台?
    一、数据中台是什么?提到数据中台,就先要了解什么是中台,对于中台的建设,大都是跟随阿里中台的方法论。中台的作用在于打通固有多业务系统之间的数据壁垒,融合各个不同业务系统间所产生的数据,通过数字化的运营和驱动来支撑前端业务的快速变化,从而产生更大的价值。而新一代数据中台,在融合......
  • nginx 中根据 $http_upgrade 变量将 HTTP 连接升级为 WebSocket 连接
    配置“$connection_upgrade”变量连接升级通常与WebSockets结合使用。在nginx中,我们可以根据$http_upgrade变量将HTTP连接升级为WebSocket连接。我们可以使用map块在nginx中定义连接和http升级之间的依赖关系:vimnginx.confmap$http_upgrade$connection_......
  • Docker本地搭建个人企业私有云盘seafile搭建(完美解决ONLYOFFICE无法预览的情况)
    seafile搭建#创建存放路径mkdir-p/media/megrez/data/seafile/seafile-mysql/dbmkdir-p/media/megrez/data/seafile-data#创建docker-compose.ymldocker-copmse.yml内容如下version:'2.0'services:db:image:mariadbcontainer_name:seafile-mysql......
  • 第五章 搭建maven工程及测试
    搭建maven工程及测试5.1准备pom文件<?xmlversion="1.0"encoding="UTF-8"?><projectxmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation=......
  • 八万乌云漏洞库——Ubuntu本地Docker搭建环境
    环境准备ubuntu16.04虚拟机换国内源vi/etc/apt/sources.list阿里源debhttp://mirrors.aliyun.com/ubuntu/xenialmaindeb-srchttp://mirrors.aliyun.com/ubuntu/xenialmaindebhttp://mirrors.aliyun.com/ubuntu/xenial-updatesmaindeb-srchttp://mirrors.aliy......
  • 迁移原Jenkins数据到新搭建的Jenkins中
    如果我们有一个运行了很久的Jenkins,但想要把运行的数据备份和恢复到我们新部署的Jenkins中,如何操作呢?Jenkins本身其实是提供了备份插件的,我们在Jenkins中安装ThinBackup插件即可实现。安装成功后,可以在系统管理中找到插件的入口: 进入后页面如下: 首先进入settings修改配......
  • npm安装教程 搭建vue
    一、相关概念npm:Nodejs下的包管理器。webpack:它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。vue-cli:用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要npminstall......