在IIS上搭建WebSocket服务器（三）

admin · 发表于 2018-11-7 00:42:00

编写客户端代码

1.新建一个*.html文件。

ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
这个地方的IP和端口号对应着我们搭建在IIS上的WebSocket服务器

<!DOCTYPE html>8 ]+ w W8 c9 W. {% a `- a# p0 T
<html xmlns="http://www.w3.org/1999/xhtml">/ E! J, A/ I$ }& _4 P/ e
<head>1 [$ t1 L: D. J& S
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
! B+ j0 Y: t$ t2 K; z
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>" l. @4 P: y) q5 J+ B+ R, O
<title></title>* m; Q, v" ?: G4 |6 F
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>! s) y9 _$ K: [) ]$ H
<script>9 A' K! H$ @, j0 `; {' I1 P+ X) A
var ws;( B" M" v& k5 ?0 G! [
$().ready(function () {/ o% f3 y) S5 B0 w' h" ^* n2 P
$('#conn').click(function () {" o7 e" L: z; R% S+ x0 A3 @+ B T
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());/ e3 z& e, b5 \9 n
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
; P& R) R8 D' f5 m2 M. I
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
6 M8 i$ ? f9 X; d" z6 s
//var host = "ws://192.168.85.128:8085/api/WSChat";
/ l7 |' p( K: G( l8 H$ p
//webSocket = new WebSocket(host);
! k, d% D# o$ H2 z0 B, t+ k" E
: q3 H) l; a4 C
$('#msg').append('<p>正在连接</p>');% R# G/ O& a! c) V$ W7 b! _
5 y7 n$ X8 u+ D+ m# g
ws.onopen = function () {
3 H5 W5 H) | r3 T4 D- G
$('#msg').append('<p>已经连接</p>');. k& X( Z1 k7 k+ W6 ^- d8 t& O
}& d7 M2 D' O% ^; P
ws.onmessage = function (evt) {$ R9 j. t$ M3 `; g$ f7 Q7 b
$('#msg').append('<p>' + evt.data + '</p>');
! W6 H- U1 E+ C% T* L% N
}+ ?# B2 l# ?# n
ws.onerror = function (evt) {
$ x X+ @; n6 R( ?1 [& G
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');/ a: ]" P* a$ j! L4 t0 o7 \
}
+ V6 e: [1 {; j# ^2 X
ws.onclose = function () {5 Y8 v6 A2 X4 \2 g% e
$('#msg').append('<p>已经关闭</p>');5 D$ X1 ~3 {/ }& M5 U0 |+ V; M; R: c
}. {9 n" d# M; M
});
, N, _+ t k( O2 G
% U% _* q8 {0 K8 b& y
$('#close').click(function () {
, F1 F8 e6 W% x2 j! G$ S
ws.close();
1 t& Q$ j4 ~" A5 K$ x7 s; J1 i& \" e
});
% b4 I0 N3 N3 z& b/ J! Y
8 A( X. G+ K5 a s6 E7 M2 T t& V
$('#send').click(function () {
5 @ ^8 ]) t% X
if (ws.readyState == WebSocket.OPEN) {. w& W0 V5 X; I" h3 C* j$ z; Q0 ]5 y3 ?
ws.send($("#to").val() + "|" + $('#content').val());6 ~' z7 ^2 q w3 W' t5 H' L- \
}1 i& [0 {2 X7 n' W
else {% I3 T/ p% e4 Y4 D' a, `
$('#tips').text('连接已经关闭');
7 ?9 r. I% v# d2 H2 P4 v% D3 v
}
2 @; p- R7 Y8 }5 {$ T+ q g9 z
});, L6 } P- s5 Z$ [) t0 D
( ]) M5 y4 e8 n4 h; G
});, V# K0 U& \! h# V/ [. o V
</script>
; L& \7 H8 J* W" a6 A
</head>
6 K/ i1 U# F/ X% r) w
<body>
6 y4 V7 x; ^% W
<div>2 ?; O+ c( c, i3 ^2 Z, g- T7 t
<input id="user" type="text" />
! ~2 ^+ m! K/ h, v2 v
<input id="conn" type="button" value="连接" />3 d) g; y6 I% R2 Q5 @- V) }* J' Y
<input id="close" type="button" value="关闭"/><br />
6 [% u A1 u4 p4 n% H
<span id="tips"></span>* s5 O+ q7 L/ F
<input id="content" type="text" />! q; j) @& r+ Y4 P
<input id="send" type="button" value="发送"/><br />) T/ |- \' J C/ W
<input id="to" type="text" />目的用户& J% _* Y9 n6 s9 ]( B% `! Y4 f* S
<div id="msg">" h2 u9 |5 D1 R9 \0 I# t
</div>
/ M U# q" a) c) ?) A* w
</div>$ |' j$ a" F Q$ j5 d$ H2 K
</body>
% N& x1 `! C4 ?* K
</html>

复制代码

2.客户端A和客户端B通信效果

在浏览器中分别打开两个窗口，左边为客户端A，右边为客户端B，点击“连接”按钮，AB客户端分别与服务器建立连接

填写要发送的内容，即可看到A和B互相发送的信息了，即实现了AB客户端实现了WebSocket即时通信。

帐号		自动登录	找回密码
密码			立即注册

[html5] 在IIS上搭建WebSocket服务器（三）