在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>
( l w) z4 y! q
<html xmlns="http://www.w3.org/1999/xhtml">
- o: h( o" Y2 u7 p7 u: Z V. y
<head>
* R8 b2 ~* _3 H% G q; E. m
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>- M1 a% l# h! \+ t) O; L& C# r
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
' d; V7 ~, F0 H, c0 t' H' `' U
<title></title>
2 h9 r3 M+ E' k9 Q9 t$ k& r4 q
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>" g, D; Y q' k% m9 i
<script>
9 i0 |4 w. ]: R3 j
var ws;8 j$ o& d; Q% q6 m
$().ready(function () {
/ R& p0 b. m' R( L' F$ @+ {
$('#conn').click(function () {) a, b4 s3 ?# U1 L, `3 W
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
' m, i7 t. I# A0 e2 {% R# h
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());2 {# i! O$ J4 `5 O1 l, f' k
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();7 B; g }0 I/ d1 q/ @! K: U0 o
//var host = "ws://192.168.85.128:8085/api/WSChat";
: M$ l% l# _* e' G9 Q( x' @
//webSocket = new WebSocket(host);, b9 V7 T6 J7 J3 h7 N; P* h0 v' e
6 C" j- L* P) r( {* F. F
$('#msg').append('<p>正在连接</p>');
: c6 G3 j' T8 `% U) L& t. i2 x
2 w; m; f2 q+ Z& v+ l8 ?# C& V
ws.onopen = function () {% d: B- K; f0 n! L4 i7 T( e& r
$('#msg').append('<p>已经连接</p>');
+ O' ~& Y* N; T1 Y7 \
}6 U0 j9 G( Q4 O& a2 Y
ws.onmessage = function (evt) {
2 H/ M, G( F' h: H- c2 f+ l
$('#msg').append('<p>' + evt.data + '</p>');8 p N8 U) _" J/ `
}6 M* z% V; {: ]
ws.onerror = function (evt) {% B" M' t2 w4 V
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');& E: A) g( ~2 }" B5 N' R
}* y2 N! p2 C. q8 ]8 @
ws.onclose = function () { N& g; M1 {# P' V
$('#msg').append('<p>已经关闭</p>');( }8 o, h5 E8 C, F& s
}% G+ Y& e2 b5 \
});: ]' t+ j# o i a" ?, h" e K7 ~( k
% y9 {" P3 s; z( `; |& _" t, |- e# U
$('#close').click(function () {
Z% [2 ~3 w2 K
ws.close();! M. T o+ j& I) w7 |# ?8 K
});0 z* E8 J( }+ Z+ y9 r+ u0 s! h9 O
3 w2 `8 r; ]6 }1 y7 G5 Q0 O
$('#send').click(function () {+ \2 X" w; h% B$ ]/ f" T
if (ws.readyState == WebSocket.OPEN) {
' j! [9 g4 D9 @! R5 i) Y4 }
ws.send($("#to").val() + "|" + $('#content').val());
, u+ D0 ?" N3 a! @, r
}
else {1 Z* M8 ?" m& S2 V
$('#tips').text('连接已经关闭');& I1 h K. o. S0 T6 V% Q$ R0 t
}
9 i1 W u% f( N, T
});; e! I8 q8 r+ ]# L& \
7 {( Q6 p: i8 t2 H
});
, m$ V; ]; f( P( \
</script>* g3 [$ K6 E& X4 q$ v
</head>. w W4 w1 \4 c# S
<body>
' e H. _) j9 w6 ?, i
<div>
4 I. ^! Q, l0 C& n, p8 N* P
<input id="user" type="text" />
' b4 y) ?6 x& @4 b5 J) A h
<input id="conn" type="button" value="连接" />
/ }2 k+ H# G/ T! ^, {
<input id="close" type="button" value="关闭"/><br />% [& Q/ T+ x3 ?/ v5 m" j
<span id="tips"></span>
( U6 ]3 B$ A1 y: N
<input id="content" type="text" />: `0 I- E- ^! V, W$ d
<input id="send" type="button" value="发送"/><br />
& X" O( L0 E) X5 z
<input id="to" type="text" />目的用户
3 c1 }% E, M( e+ f
<div id="msg"># \& w9 O8 r1 t' u% |" I
</div>0 O* Y7 ]7 I" L+ o
</div>( g3 A0 z4 t2 r4 [' x, G3 X
</body>3 h3 S2 N, q/ T6 P- l
</html>

复制代码

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

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

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

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

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