大家好，如果您还对数据编辑网站源码分享不太了解，没有关系，今天就由本站为大家分享数据编辑网站源码分享的知识，包括数据编写工具的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！
前言
最近想做一个Web版的即时聊天为后面开发的各项功能做辅助，就需要浏览器与服务器能够实时通讯。而WebSocket这种双向通信协议，就很合适用来实现这种需求。
本篇文章主要解决CWebsocket开源库：fleckSSL域名证书：腾讯云IIS版本域名证书
最终效果
代码实现
前端
1、HTML
<!DOCTYPEhtml>\n<html>\n<head>\n<metacharset=&34;/>\n<title></title>\n<linkhref=&34;rel=&34;/>\n</head>\n<body>\n<divid=&34;>\n<divclass=&34;></div>\n<divclass=&34;></div>\n<divclass=&34;>\n<textareaid=&34;></textarea>\n<buttonid=&34;>发送</button>\n</div>\n</div>\n<scriptsrc=&34;></script>\n</body>\n</html>
2、JavaScript
window.onload=function(){\nvarTipElement=document.querySelector(&ChatContainer>div.tip&34;34;);\nvarSendMsgContentElement=document.getElementById(&34;);\nvarSendMsgButton=document.getElementById(&34;);\nwindow.wss=newWebSocket(&34;);\n//监听消息状态\nwss.onmessage=function(e){\nvardataJson=JSON.parse(e.data);\nloadData(dataJson.nickName,dataJson.msg,dataJson.date,dataJson.time,true);\n}\n//监听链接状态\nwss.onopen=function(){\nif(TipElement.className.indexOf(&34;)<0){\nTipElement.className=TipElement.className+&34;;\n}\nif(TipElement.className.indexOf(&34;)>=0){\nTipElement.className=TipElement.className.replace(&34;,&34;);\n}\n}\n//监听关闭状态\nwss.onclose=function(){\nif(TipElement.className.indexOf(&34;)>=0){\nTipElement.className=TipElement.className.replace(&34;,&34;);\n}\nif(TipElement.className.indexOf(&34;)<0){\nTipElement.className=TipElement.className+&34;;\n}\n}\n//监控输入框回车键（直接发送输入内容）\nSendMsgContentElement.onkeydown=function(){\nif(event.keyCode==13&&SendMsgContentElement.value.trim()!=&34;){\nif(SendMsgContentElement.value.trim()!=&34;){\nSendMsgButton.click();\nevent.returnValue=false;\n}else{\nSendMsgContentElement.value=&34;;\n}\n}\n}\n//发送按钮点击事件\nSendMsgButton.onclick=function(){\nvarmsgDataJson={\nmsg:SendMsgContentElement.value,\n};\nSendMsgContentElement.value=&34;;\nvartoday=newDate();\nvardate=today.getFullYear()+&34;+(today.getMonth()+1)+&34;+today.getDate()+&34;;\nvartime=today.getHours()+&34;+today.getMinutes()+&34;+today.getSeconds();\nloadData(&34;,msgDataJson.msg,date,time,false);\nletmsgDataJsonStr=JSON.stringify(msgDataJson);\nwss.send(msgDataJsonStr);\n}\n//把数据加载到对话框中\nfunctionloadData(nickName,msg,date,time,isOther){\nletmsgItemElement=document.createElement(&39;);\nif(isOther){\nmsgItemElement.className=&34;;\n}else{\nmsgItemElement.className=&34;;\n}\nletchatHeadElement=document.createElement(&39;);\nchatHeadElement.className=&34;;\nchatHeadElement.innerHTML=&34;0010241024\\&34;M956.696128512.75827c0245.270123-199.054545444.137403-444.615287444.137403-245.5382290-444.522166-198.868303-444.522166-444.1374030-188.264804117.181863-349.108073282.675034-413.74725550.002834-20.171412104.631012-31.311123161.858388-31.31112357.2979840111.8790911.128455161.92899631.311123C839.504032163.650197956.696128324.494489956.696128512.75827L956.696128512.75827M341.214289419.091984c074.84666238.349423139.6485594.097098171.36797323.11955713.15562449.15144320.74241776.76945420.74241726.64894051.773154-7.09662874.286913-19.35583757.06467-31.11362596.650247-96.70755296.650247-172.7422730-105.867166-76.664054-192.039781-170.936137-192.039781C417.867086227.053226341.214289313.226864341.214289419.091984L341.214289419.091984M513.886977928.114163c129.8831390245.746984-59.732429321.688583-153.211451-8.971325-73.739445-80.824817-136.51314-182.517917-167.825286-38.40775234.55091-87.47835455.340399-140.98908155.340399-54.6987860-104.770182-21.907962-143.55144-57.96211-98.92198728.234041-171.37922985.823668-188.368158154.831344C255.507278861.657588376.965537928.114163513.886977928.114163L513.886977928.114163M513.886977928.114163513.886977928.114163z\\&34;;\nletmsgMainElement=document.createElement(&39;);\nmsgMainElement.className=&34;;\nletnickNameElement=document.createElement(&39;);\nnickNameElement.className=&34;;\nnickNameElement.innerText=nickName;\nletmsgElement=document.createElement(&39;);\nmsgElement.className=&34;;\nmsgElement.innerText=msg;\nlettimeElement=document.createElement(&39;);\ntimeElement.className=&34;;\nlettime_date_Element=document.createElement(&39;);\ntime_date_Element.innerText=date;\nlettime_time_Element=document.createElement(&39;);\ntime_time_Element.innerText=time;\ntimeElement.append(time_date_Element);\ntimeElement.append(time_time_Element);\nmsgMainElement.append(nickNameElement);\nmsgMainElement.append(msgElement);\nmsgMainElement.append(timeElement);\nmsgItemElement.append(chatHeadElement);\nmsgItemElement.append(msgMainElement);\nMsgListElement.append(msgItemElement);\nMsgListElement.scrollTop=MsgListElement.scrollHeight-MsgListElement.clientHeight;\n}\n}
3、CSS
*{\npadding:0;\nmargin:0;\n}\nhtml,\nbody{\nfont-size:14px;\nheight:100%;\n}\nbody{\npadding:2%;\nbox-sizing:border-box;\nbackground-color:ChatContainer{\npadding:1%25px025px;\nwidth:80%;\nmax-width:850px;\nheight:100%;\nbackground-color:ChatContainer.tip{\nheight:30px;\nline-height:30px;\ntext-align:center;\nalign-items:center;\njustify-content:center;\ncolor:ChatContainer.tip:before{\ncontent:&34;;\n}\nChatContainer.tip.disConn:before{\ncontent:&34;;\n}\nChatContainer.tip.conn:before{\ncontent:&34;;\n}\nChatContainer.msgList.msgItem{\ndisplay:flex;\nmargin:5px;\n}\nffffff;\nborder-radius:100%;\n}\nChatContainer.msgList.msgItem.msgMain.nickName{\ncolor:ChatContainer.msgList.msgItem.msgMain.msg{\npadding:10px;\nline-height:30px;\ncolor:ChatContainer.msgList.msgItem.msgMain.time{\ncolor:ChatContainer.msgList.msgItem.msgMain.timespan:first-child{\nmargin-right:3px;\n}\nChatContainer.msgList.self.nickName{\ntext-align:right;\n}\nd6e5f6;\n}\nChatContainer.msgList.other.msg{\nborder-radius:010px10px10px;\nbackground-color:ChatContainer.msgInput{\nmargin:15px0;\ndisplay:flex;\n}\n333333;\nborder-radius:10px0010px;\nborder:none;\noutline:none;\nborder:1pxsolidChatContainer.msgInputbutton{\nwidth:20%;\ntext-align:center;\nheight:40px;\nline-height:40px;\ncolor:2a6bf2;\nborder-radius:010px10px0;\nborder:1pxsolid34;://&34;:&34;wss://&34;:&34;服务端&34;[{clientId}]加入&34;服务端&34;[{clientId}]离开&34;【开始监听】&34;服务端&39;wss://xxx.xxx.xxx.xxx:xxxx/'failed:
解决方法：要建立WSS安全通道，必须要先申请域名SSL证书，同时在防火墙中开放指定端口，以及前端WSS请求域名要跟SSL证书域名相同。
好了，文章到这里就结束啦，如果本次分享的数据编辑网站源码分享和数据编写工具问题对您有所帮助，还望关注下本站哦！