在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>
& H. x! \* B/ |6 z* _2 f A) G5 P
<html xmlns="http://www.w3.org/1999/xhtml">
* H7 Q! p# |0 D' F0 i+ [# x/ s
<head>
- z' W9 U p/ J% F
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
( L0 @5 k/ |2 G1 X5 A( V
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>2 R- m) \8 {2 p4 ?/ o% C+ Z
<title></title>" Q3 E, z$ c9 N6 b. Z+ e
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script> `* I, M6 Q" T6 |; X' d4 T# \
<script>
7 ~* T4 z$ Q3 O% t/ A8 O0 M
var ws;5 U# t9 c# z9 c4 M; C3 Y
$().ready(function () {
3 Z& {% O- o& b0 A4 m1 U! I/ H! k2 _
$('#conn').click(function () {- |; T! q) o" c* e; e/ o; x
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
2 B% h7 r; a. g, D
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
' o! c; f( z0 |9 F$ C! W- B0 I
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();( r) z3 c& P* ^/ K, ]/ I! e% U' n
//var host = "ws://192.168.85.128:8085/api/WSChat";/ P6 E9 L: ~- X1 u; ]
//webSocket = new WebSocket(host);$ S" g% F0 G3 w. _
. S& U' ^1 R8 e
$('#msg').append('<p>正在连接</p>');
. _$ s, j3 l2 o: T7 O; T
' z+ m5 C; ~0 ~
ws.onopen = function () {& J. s% o* V3 E: x
$('#msg').append('<p>已经连接</p>');
h+ e/ W" u% N5 ?; n; n0 h
}
1 ~: `+ b& `3 H# L( v W* q
ws.onmessage = function (evt) {
# A/ `% p1 e3 U& s" C. Q6 b+ e4 ?
$('#msg').append('<p>' + evt.data + '</p>');
0 U8 ~( V: J' Y" a4 u4 y' l
}
! z2 k3 {3 e+ S' ?) a" Y
ws.onerror = function (evt) {
; l9 y. e2 M5 `
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
( A4 [+ R4 i- Z/ i
}: ?. L! b1 E! g4 l! P& N; p3 }
ws.onclose = function () {
: \3 T9 N) y* j# ^: E
$('#msg').append('<p>已经关闭</p>');& `6 q& Z! X/ D4 B
}+ \$ V& U: o4 k: f1 i8 F" D% E+ v
});
2 O* I. m: l! l& M! s$ y. Z
# E0 c+ P1 k+ ^+ k o4 X+ V4 C7 k
$('#close').click(function () {
* [% X: |0 o- W
ws.close();' O: o4 Q0 l$ n% D
});
! J% c ?) T: r+ n+ }3 Z
0 A- m' j5 o) m* l) f
$('#send').click(function () {
6 s/ e6 }4 o, I4 L
if (ws.readyState == WebSocket.OPEN) {
4 ]& j/ P6 V3 H$ |% E+ B
ws.send($("#to").val() + "|" + $('#content').val());+ x4 W0 K$ F6 W% T3 l& D# J" I
}
3 ?9 v' k- Q7 B9 r9 X( m ~8 g
else {* H- R: u( m; P5 R( A0 g+ Y
$('#tips').text('连接已经关闭');! k; c9 V4 s& s
}
# d. L, Q' Z3 V
});. X% i" `# Z# t# d, \. @! ^
6 r; \5 U9 r% f7 g1 x- b1 Y
});: k/ Q9 t$ C3 J0 U
</script>" R4 {( l* f) C1 B6 A& G0 Z4 A" x8 v
</head>
7 k# n2 O/ E3 t C8 _! d8 i+ T! u
<body>
- Z9 U, d7 i& k, `
<div>( ~' `6 h' p1 v2 ?
<input id="user" type="text" />
, F, o. {* K+ O/ Z
<input id="conn" type="button" value="连接" />$ q. ~1 q$ Z; G: p/ ~! C
<input id="close" type="button" value="关闭"/><br /> Z/ Q+ k2 S4 t1 r8 Z; A- e1 \
<span id="tips"></span>
& n5 x6 j) V( `+ i
<input id="content" type="text" />1 i, R4 U" i3 [: s( W
<input id="send" type="button" value="发送"/><br />: ?! p2 x0 g1 t$ b3 _) U! I, P* G9 |
<input id="to" type="text" />目的用户) y! c2 \# m0 S5 _- K2 T _
<div id="msg">1 M. r/ h8 x6 g" e4 v
</div>4 V% z1 u, Z. u* Z: ]; ^
</div>% A8 M5 W2 W2 H
</body>
4 O5 k7 a) |1 t. J. j) a" p5 a0 h
</html>

复制代码

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

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

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

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

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