CancellationToken? cancellationToken
大家好，好久没有写文章了，固然不是不想写，主要是事情太忙，公司有没有网络环境，不让上网，所以写的就少了。今天是2019年的最后一天，明天就要开始新的一年，固然也但愿本身有一个新的开始。在2019年的最后一天，写点对象，作为这一年的总结吧！写点啥呢？比来有时间，由于公司的需要，需要实现一个本身的、Web版本的聊天工具，固然也要能传输文件。颠末两个星期的无网络、艰苦的学习，终于写出了一个最初的版本。在公司里面里面已经生成正式版本了，很多类型都进行了抽象化，撑持注册，头像，私信，群聊，传输大文件，类似 Web 版本的QQ。那是公司的对象，这个版本是我又从头写的，没有做过多的设计，但是成果都实现了，这个版本还对照粗拙，有时间在写第二个版本。
另外先不说，先上一个截图，让大家看一下效果，版本虽然粗拙，但是该有的成果都有了，大家可以按照本身的需要改本钱身的对象。效果图如下：
好了，以上就是效果图，挺实用的，大家只要稍加改削就可以使用，所有代码都是可以正常使用的。
代码挺多的，一步一步的来。我先对我的项目做个截图，让大家做到心里有数。项目分为两个部分，一个部分是类库，主要实现代码再次，还有一个就是MVC的前真个项目。
第一步：项目截图：（VS2017）
第二步：前端代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="viewport" content="width=device-width" /> 5 <title>Index</title> 6 <style type="text/css"> 7 html, body { 8 font-size: 12px; 9 height: 100%; 10 width: 100%; 11 overflow-y: auto; 12 } 13 14 textarea { 15 font-size: 12px; 16 color: black; 17 } 18 19 #messageContent { 20 background-color: cadetblue; 21 border: 1px solid black; 22 width: 500px; 23 height: 500px; 24 font-size: 14px; 25 overflow-y: auto; 26 } 27 28 .chatLeft { 29 display: block; 30 color: chocolate; 31 font-size: 12px; 32 margin-top: 5px; 33 margin-left: 10px; 34 padding: 3px; 35 float: left; 36 clear: both; 37 } 38 39 .chatRight { 40 display: block; 41 color: white; 42 font-size: 12px; 43 margin-top: 5px; 44 margin-right: 10px; 45 padding: 3px; 46 text-align: right; 47 float: right; 48 clear: both; 49 } 50 51 .chatTitleSingle { 52 white-space: nowrap; 53 display: block; 54 border-radius: 3px; 55 padding: 5px; 56 color: black; 57 background-color: #267b8a; 58 font-size: 14px; 59 text-align: left; 60 } 61 62 .chatTitleGroup { 63 white-space: nowrap; 64 border-radius: 3px; 65 display: block; 66 padding: 5px; 67 color: #b61111; 68 background-color: #267b8a; 69 font-size: 14px; 70 max-width: 250px; 71 min-width: 200px; 72 text-align:left; 73 } 74 75 .chatSelfContent { 76 display: block; 77 border-radius: 3px; 78 padding: 5px; 79 font-size: 12px; 80 color: black; 81 background-color: #51d870; 82 max-width: 250px; 83 min-width: 200px; 84 text-align: left; 85 } 86 87 .chatContent { 88 border-radius: 3px; 89 display: block; 90 padding: 5px; 91 font-size: 12px; 92 color: black; 93 background-color: white; 94 max-width: 250px; 95 max-width: 200px; 96 text-align: left; 97 } 98 99 .loginContent { 100 padding: 5px; 101 text-align: center; 102 font-size: 14px; 103 color: gold; 104 font-weight: bold; 105 clear: both; 106 } 107 108 .logoutContent { 109 padding: 5px; 110 text-align: center; 111 font-size: 14px; 112 color: darkslateblue; 113 font-weight: bold; 114 clear: both; 115 } 116 117 .fileUploadedFinished { 118 padding: 5px; 119 text-align: center; 120 font-size: 12px; 121 color: darkslateblue; 122 clear: both; 123 } 124 125 .offlineUser { 126 padding: 3px; 127 font-size: 14px; 128 color: dimgrey; 129 text-align: center; 130 clear: both; 131 } 132 133 #chatAndFileContainer { 134 margin: 5px; 135 } 136 137 #spnNoticeText { 138 color: red; 139 } 140 141 .noticeMessageInContainer { 142 font-size: 12px; 143 text-align: center; 144 color: darkslateblue; 145 clear: both; 146 } 147 148 a:link { 149 color: #03516f; 150 text-decoration: none; 151 } 152 153 a:visited { 154 color: #1ea73c; 155 text-decoration: wavy; 156 } 157 158 a:hover { 159 color: #0597d0; 160 text-decoration: underline; 161 } 162 163 a:active { 164 color: #0bbd33; 165 text-decoration: none; 166 } 167 </style> 168 </head> 169 <body> 170 <div> 171 <div><span style="padding-left:5px;color:red;">提示：</span><span id="spnNoticeText">暂无连接！</span></div> 172 <div style="margin:5px 4px"> 173 链接处事：<input type="text" name="name" placeholder="请输入登录标识" id="txtUserKey"/> 174 <button id="btnConnected" style="margin-right:10px;margin-left:10px;">成立连接</button> 175 <button id="btnClose">封锁连接</button> 176 </div> 177 <div id="chatAndFileContainer" style="display:none"> 178 <div style="margin:5px 0px;"> 179 动静内容：<textarea id="txtContent" placeholder="动静内容" cols="35" rows="5"></textarea> 180 </div> 181 <div style="margin:5px 0px;"> 182 接受人名：<input type="text" id="txtPrivateUserKey" placeholder="群聊无需填写接收人" /> 183 </div> 184 <div> 185 文件上传：<input type="file" id="file" style="border:1px solid black;margin:0px;padding:0px;width:300px;" multiple /> 186 </div> 187 <div id="uploadProgress"></div> 188 <div style="margin:10px 60px;"> 189 <button id="btnSendGroup" style="margin-right:10px">群 聊</button> <button id="btnSendPrivate">私 聊</button> 190 </div> 191 </div> 192 <div id="messageContent"></div> 193 </div> 194 <br /> 195 <script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script> 196 <script type="text/javascript" src="~/Scripts/MyScripts/ChatAndUploadFilesProcessHandler.js"></script> 197 </body> 198 </html>
第三步：JavaScript 代码，文件名：ChatAndUploadFilesProcessHandler.js
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/32578.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")