在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>
z" X. `0 O) F8 S+ m, o+ X
<html xmlns="http://www.w3.org/1999/xhtml"># j0 q9 B7 Z! c. J2 o( z: G, ~- M
<head>9 H" }3 z4 o e" Q0 @
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>. [. X2 U" @! o- h
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>$ h) \1 L+ y& v1 s9 u! [5 w* P
<title></title>
8 A2 b! U9 Y+ P) x2 u$ z
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>. g. L2 d2 E' n- ]
<script>
) \) s9 E0 H0 q. D
var ws;
( c; ?' v# T: L- L/ h
$().ready(function () {+ }% n) k+ d2 T5 S9 u6 x
$('#conn').click(function () {3 I9 T/ z8 R4 W( w4 r2 o# L- A
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
% O& S/ c6 O* K# {
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());* o- A) e7 S( O5 n. L1 t1 D
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
* m3 c: n8 x, v- M2 |
//var host = "ws://192.168.85.128:8085/api/WSChat";
K: V+ E7 s1 L$ `0 a2 y! b3 W; Q
//webSocket = new WebSocket(host);
! t7 C1 I: o& C2 B3 d: l
$ d t6 b. w7 G+ X
$('#msg').append('<p>正在连接</p>');
3 E# \4 N* d/ U) L
2 t" U; Y p# h. `4 ~1 q( y3 N! C3 P
ws.onopen = function () {" }/ E$ e$ R4 p% }6 x
$('#msg').append('<p>已经连接</p>');
1 ]9 ~+ C0 u) r/ { K
}
) R4 E8 q5 I+ `; f* a0 p3 P1 T- R+ h
ws.onmessage = function (evt) { I6 l! j9 M6 o. q4 D) w. g1 Z
$('#msg').append('<p>' + evt.data + '</p>');
6 k: X4 h3 S: ]2 c1 F/ T' K' o: o
}
4 { K) ]) ]) _
ws.onerror = function (evt) {
" f! |+ p7 _6 O S8 t% N5 T' X l
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
+ U' ` F% C u! }, U
}
: s3 l) a$ C4 T9 o4 ]1 x/ y
ws.onclose = function () {
$ f, o6 W( k* a8 z/ t
$('#msg').append('<p>已经关闭</p>');5 O" P7 r% [0 |
}
0 D$ p" f, Y, s6 u; M
});
9 D) D1 U4 z1 @( a( r9 O
# X6 I% t( w; s; b
$('#close').click(function () {
* d j* X, U& o( m3 i0 H+ X
ws.close();8 k2 l; G, ?9 q, V2 s5 G- `" I- V
});- x0 s& s) Z& K( }, e# A
5 B3 r: {4 b& {) p7 Q
$('#send').click(function () {: a* ~6 _- ?# N3 Z) Q- d
if (ws.readyState == WebSocket.OPEN) {
9 ~% E' v) v% v" m* v/ _/ k
ws.send($("#to").val() + "|" + $('#content').val());- [. @* Z& N% C3 R2 b& ]
}9 \4 I3 a" d) A3 o4 Q0 r5 I# S
else {
+ r9 q% f$ M/ R; r1 n7 }
$('#tips').text('连接已经关闭');
1 O8 }3 s5 O5 n G2 A: x8 s
}4 H9 t/ O M9 j# x5 K
});- x, ?$ y; ]4 E+ n$ P; a
% ^; e. i' K( A* Q4 {
});
d* e* `. [3 z+ ^7 R
</script>
5 }, m0 U' v) ~# O: y
</head>
, U0 C" i, {6 h/ d2 E
<body>
: k# B' P. B2 Y8 B: P. E, h# b
<div>% \: D3 Y! W5 ?6 k1 a+ k2 I$ f& y
<input id="user" type="text" />
5 P% P; ]2 m3 I( h
<input id="conn" type="button" value="连接" />
$ [: K* `% `4 T* G
<input id="close" type="button" value="关闭"/><br />
( ?5 H9 x' W. b+ {
<span id="tips"></span>
8 b# l3 O, V, d3 f7 B. d
<input id="content" type="text" />1 v# R" H* g5 u: C
<input id="send" type="button" value="发送"/><br />. O W7 t8 I _# n
<input id="to" type="text" />目的用户/ G# W/ C/ J& Z3 t5 c
<div id="msg">
7 x: c( _& |' S0 K$ K
</div>
1 z2 S' W9 \6 K! m5 ?
</div>
2 _. y5 c5 ~ |. i3 Y
</body>
, k! V& B2 S# i0 X3 n0 t8 e3 J- s
</html>

复制代码

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

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

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

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

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