c#通过fleck实现wss协议的websocket多人web实时聊天（附源码）-百家乐凯发k8

2、javascript

window.onload = function () {
    var tipelement = document.queryselector("#chatcontainer > div.tip");
    var msglistelement = document.queryselector("#chatcontainer > div.msglist");
    var sendmsgcontentelement = document.getelementbyid("sendmsgcontent");
    var sendmsgbutton = document.getelementbyid("sendmsgbutton");
    window.wss = new websocket("wss://xxx.hxsfx.com:xxx");
    //监听消息状态
    wss.onmessage = function (e) {
        var datajson = json.parse(e.data);
        loaddata(datajson.nickname, datajson.msg, datajson.date, datajson.time, true);
    }
    //监听链接状态
    wss.onopen = function () {
        if (tipelement.classname.indexof("conn") < 0) {
            tipelement.classname = tipelement.classname   " conn";
        }
        if (tipelement.classname.indexof("disconn") >= 0) {
            tipelement.classname = tipelement.classname.replace("disconn", "");
        }
    }
    //监听关闭状态
    wss.onclose = function () {
        if (tipelement.classname.indexof("conn") >= 0) {
            tipelement.classname = tipelement.classname.replace("conn", "");
        }
        if (tipelement.classname.indexof("disconn") < 0) {
            tipelement.classname = tipelement.classname   " disconn";
        }
    }
    //监控输入框回车键（直接发送输入内容）
    sendmsgcontentelement.onkeydown = function () {
        if (event.keycode == 13 && sendmsgcontentelement.value.trim() != "") {
            if (sendmsgcontentelement.value.trim() != "") {
                sendmsgbutton.click();
                event.returnvalue = false;
            } else {
                sendmsgcontentelement.value = "";
            }
        }
    }
    //发送按钮点击事件
    sendmsgbutton.onclick = function () {
        var msgdatajson = {
            msg: sendmsgcontentelement.value,
        };
        sendmsgcontentelement.value = "";
        var today = new date();
        var date = today.getfullyear()   "年"   (today.getmonth()   1)   "月"   today.getdate()   "日";
        var time = today.gethours()   ":"   today.getminutes()   ":"   today.getseconds();
        loaddata("自己", msgdatajson.msg, date, time, false);
        let msgdatajsonstr = json.stringify(msgdatajson);
        wss.send(msgdatajsonstr);
    }
    //把数据加载到对话框中
    function loaddata(nickname, msg, date, time, isother) {
        let msgitemelement = document.createelement('div');
        if (isother) {
            msgitemelement.classname = "msgitem other";
        } else {
            msgitemelement.classname = "msgitem self";
        }
        let chatheadelement = document.createelement('div');
        chatheadelement.classname = "chathead";
        chatheadelement.innerhtml = "";
        let msgmainelement = document.createelement('div');
        msgmainelement.classname = "msgmain";
        let nicknameelement = document.createelement('div');
        nicknameelement.classname = "nickname";
        nicknameelement.innertext = nickname;
        let msgelement = document.createelement('div');
        msgelement.classname = "msg";
        msgelement.innertext = msg;
        let timeelement = document.createelement('div');
        timeelement.classname = "time";
        let time_date_element = document.createelement('span');
        time_date_element.innertext = date;
        let time_time_element = document.createelement('span');
        time_time_element.innertext = time;
        timeelement.append(time_date_element);
        timeelement.append(time_time_element);
        msgmainelement.append(nicknameelement);
        msgmainelement.append(msgelement);
        msgmainelement.append(timeelement);
        msgitemelement.append(chatheadelement);
        msgitemelement.append(msgmainelement);
        msglistelement.append(msgitemelement);
        msglistelement.scrolltop = msglistelement.scrollheight - msglistelement.clientheight;
    }
}

3、css

* {
  padding: 0;
  margin: 0;
}
html,
body {
  font-size: 14px;
  height: 100%;
}
body {
  padding: 2%;
  box-sizing: border-box;
  background-color: #a3aebc;
}
#chatcontainer {
  padding: 1% 25px 0 25px;
  width: 80%;
  max-width: 850px;
  height: 100%;
  background-color: #fefefe;
  border-radius: 10px;
  box-sizing: border-box;
  margin: auto;
}
#chatcontainer .tip {
  height: 30px;
  line-height: 30px;
  text-align: center;
  align-items: center;
  justify-content: center;
  color: #999999;
}
#chatcontainer .tip:before {
  content: "连接中";
}
#chatcontainer .tip.disconn {
  color: red;
}
#chatcontainer .tip.disconn:before {
  content: "× 连接已断开";
}
#chatcontainer .tip.conn {
  color: green;
}
#chatcontainer .tip.conn:before {
  content: "√ 已连接";
}
#chatcontainer .msglist {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  height: calc(100% - 100px);
}
#chatcontainer .msglist .msgitem {
  display: flex;
  margin: 5px;
}
#chatcontainer .msglist .msgitem .chathead {
  height: 36px;
  width: 36px;
  background-color: #ffffff;
  border-radius: 100%;
}
#chatcontainer .msglist .msgitem .msgmain {
  margin: 0 5px;
  display: flex;
  flex-direction: column;
}
#chatcontainer .msglist .msgitem .msgmain .nickname {
  color: #666666;
}
#chatcontainer .msglist .msgitem .msgmain .msg {
  padding: 10px;
  line-height: 30px;
  color: #333333;
}
#chatcontainer .msglist .msgitem .msgmain .time {
  color: #999999;
  font-size: 9px;
}
#chatcontainer .msglist .msgitem .msgmain .time span:first-child {
  margin-right: **x;
}
#chatcontainer .msglist .self {
  flex-direction: row-reverse;
}
#chatcontainer .msglist .self .nickname {
  text-align: right;
}
#chatcontainer .msglist .self .msg {
  border-radius: 10px 0 10px 10px;
  background-color: #d6e5f6;
}
#chatcontainer .msglist .self .time {
  text-align: right;
}
#chatcontainer .msglist .other .msg {
  border-radius: 0 10px 10px 10px;
  background-color: #e8eaed;
}
#chatcontainer .msginput {
  margin: 15px 0;
  display: flex;
}
#chatcontainer .msginput textarea {
  font-size: 16px;
  padding: 0 5px;
  width: 80%;
  box-sizing: border-box;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
  color: #333333;
  border-radius: 10px 0 0 10px;
  border: none;
  outline: none;
  border: 1px solid #eee;
  resize: none;
}
#chatcontainer .msginput button {
  width: 20%;
  text-align: center;
  height: 40px;
  line-height: 40px;
  color: #fefefe;
  background-color: #2a6bf2;
  border-radius: 0 10px 10px 0;
  border: 1px solid #2a6bf2;
}

后端

创建控制台程序（通过cmd命令调用，可修改源码为直接运行使用），然后进入gnet安装fleck，其中的主要代码如下（完整源码移步github获取）：

//组合监听地址
var loaction = websocketprotocol   "://"   listenip   ":"   listenport;
var websocketserver = new websocketserver(loaction);
if (loaction.startswith("wss://"))
{
    websocketserver.certificate = new x509certificate2(pfxfilepath, pfxpassword
   , x509keystorageflags.exportable | x509keystorageflags.machinekeyset | x509keystorageflags.persistkeyset
    );
    websocketserver.enabledsslprotocols = system.security.authentication.sslprotocols.tls12;
}//当为安全链接时，将证书信息写入链接
//开始侦听
websocketserver.start(socket =>
{
    var socketconnectioninfo = socket.connectioninfo;
    var clientid = socketconnectioninfo.clientipaddress   ":"   socketconnectioninfo.clientport;
    socket.onopen = () =>
    {
        if (!ip_scoket_dic.containskey(clientid))
        {
            ip_scoket_dic.add(clientid, socket);
        }
        console.writeline(customsend("服务端", $"[{clientid}]加入"));
    };
    socket.onclose = () =>
    {
        if (ip_scoket_dic.containskey(clientid))
        {
            ip_scoket_dic.remove(clientid);
        }
        console.writeline(customsend("服务端", $"[{clientid}]离开"));
    };
    socket.onmessage = message =>
    {
        //将发送过来的json字符串进行解析
        var msgmodel = jsonconvert.deserializeobject(message);
        console.writeline(customsend(clientid, msgmodel.msg, clientid));
    };
});
//出错后进行重启
websocketserver.restartafterlistenerror = true;
console.writeline("【开始监听】"   loaction);
//服务端发送消息给客户端
do
{
    console.writeline(customsend("服务端", console.readline()));
} while (true);

问题:websocket connection to 'wss://xxx.xxx.xxx.xxx:xxxx/' failed:
解决方法：要建立wss安全通道，必须要先申请域名ssl证书，同时在防火墙中开放指定端口，以及前端wss请求域名要跟ssl证书域名相同。