在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>( T: w" R; ]5 Y4 }8 @+ c0 J
<html xmlns="http://www.w3.org/1999/xhtml"># h+ I* @! \% j2 O1 ~+ D9 g7 w
<head>
. w, M4 ]- C0 U/ X, p1 w# _
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>; z& @# N2 T, }4 `$ j
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
* a( Y3 x0 \2 O5 s2 L; ~5 p
<title></title>8 n1 A# r# f. ]( Y j: }
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>6 |7 j* K, L" i
<script>; C' U9 f* z+ H$ Y7 u; O8 H- l
var ws;% R1 F( C% c+ t' y+ ~! [
$().ready(function () {
+ L5 A5 u6 ~2 m; [" p) n
$('#conn').click(function () {
' h4 _+ `+ a0 g- c6 [& B6 ^1 H
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());# G4 }5 F8 p, s8 J
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
# C8 E9 b' L9 n3 T8 h# b
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val(); a* d, ]; {% E- r
//var host = "ws://192.168.85.128:8085/api/WSChat";
6 Z2 ~. s, K1 I' O$ q
//webSocket = new WebSocket(host);
3 N4 i2 ~' j( w2 s& Z1 E
( r" Y; V# l0 x _) H$ n
$('#msg').append('<p>正在连接</p>');/ t) j, S* A8 G# ^
6 `) Z. u _; A
ws.onopen = function () {& M- @ C; v- T' \
$('#msg').append('<p>已经连接</p>');
3 n3 c) l4 m3 G3 p/ |' u2 c) Z
}
, B% |8 H+ q$ c( c; v' m$ m; e
ws.onmessage = function (evt) {0 S9 u$ y0 P4 c( ^7 Q) N
$('#msg').append('<p>' + evt.data + '</p>');
, R9 M2 }1 l5 G* {7 }7 u
}# Q/ e6 }$ m; J. W. ?
ws.onerror = function (evt) {
3 ]) O9 ?1 Z7 u6 B* S7 I. ]; ~. @
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');% q% f* f) E" q) ]: u
}4 s: e& m3 ^% ~* B
ws.onclose = function () {
4 d9 d. m+ o% ^# \1 z" _; Y5 g" E
$('#msg').append('<p>已经关闭</p>');
- G" W* n3 Z; v% @. p2 l2 E& W
}6 Z `8 E/ a+ W& x; y# D3 X
});, n( I$ m/ g% n8 T# M) y2 d
3 d: k, S7 S* R& y
$('#close').click(function () {
) E/ n( J3 S {# f+ {6 e% b; Z
ws.close();
% ?6 O" b! A6 K; Q% i5 M7 b$ w
});6 u' {5 \; m3 B$ C+ ]
7 G& s+ Z% L! g
$('#send').click(function () {( n- z# C; w, s( u9 J% d
if (ws.readyState == WebSocket.OPEN) {
3 c: r0 M; j7 b+ ]: O6 ]- g; {
ws.send($("#to").val() + "|" + $('#content').val());
4 f5 |$ s4 q! z3 {2 l( V
}
- o9 G. T# r5 G: _
else {3 _( m' \$ Q% K8 ^# F$ t
$('#tips').text('连接已经关闭');
9 M9 i0 X ~ g8 m& l$ N# M! O
}
! f$ o* O' e1 C+ Z
});6 u/ b- ^6 _* j, K" V3 o
% [# _, l, r6 F6 [, H! i7 |4 ~
});
$ o4 e8 E0 l2 y5 A: D1 d
</script>% |0 \( R* ^; F8 g# ~
</head>
8 T/ z0 l }- M) r/ N
<body>+ _3 C! v7 |3 r
<div>0 X+ n5 v" v* J s& F6 U a4 z
<input id="user" type="text" /> N' m& N( S0 `2 e! T
<input id="conn" type="button" value="连接" />
6 _6 ?1 Y6 x8 b k) U7 [( S
<input id="close" type="button" value="关闭"/><br />; j' n) X) G3 h
<span id="tips"></span>
% C9 S# t2 r. M% \) J9 A: Q/ r
<input id="content" type="text" />
/ m, q4 c* w! e* d
<input id="send" type="button" value="发送"/><br />5 f+ c" h) S- L1 @, v
<input id="to" type="text" />目的用户+ m5 q, C$ k; }0 x7 P
<div id="msg">8 O3 A' V9 B* U4 o# h- J/ f
</div>3 Q" x/ {1 E8 J# u2 P" N s
</div>
& [2 f6 P, `; y. \
</body># j c7 T" Y( \( j) w) o/ a6 ?4 {
</html>

复制代码

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

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

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

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

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