在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>* r7 O. G; `8 y3 v
<html xmlns="http://www.w3.org/1999/xhtml">, u3 A" q$ ~! _" Q! O
<head>" F4 H% H! R' d, K2 E$ p$ f' i$ c
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
/ J; @* o8 O+ H1 N: q6 p
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>) s7 y7 K: [" V; g
<title></title>- s- H: |, m s1 o1 W
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
b1 D7 F& z" a; o: g
<script>
' s0 _* Z$ ~ `" `; D9 p
var ws;
$ ~# c: ^; Q. D
$().ready(function () {- I f, a+ t0 j, `) I
$('#conn').click(function () {
9 E/ V: J7 i0 {! a- e
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
5 r/ B2 L- C; \0 A8 y: s# B+ N4 c( R
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
4 `( M; z. v8 g: _+ A! A1 ^
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();) O6 h/ N5 E- H1 `* V3 D. x0 T
//var host = "ws://192.168.85.128:8085/api/WSChat"; N& {: \0 f; ~$ G" g
//webSocket = new WebSocket(host);5 q% s m9 i9 P% C8 v u
$ q9 J6 L Y* r/ ~; B" V! N
$('#msg').append('<p>正在连接</p>');- L. e8 k7 }2 w2 O! ]: e# I( T
' f' H' }/ f1 d; `; k
ws.onopen = function () {% r# S4 L" o5 U0 n$ O
$('#msg').append('<p>已经连接</p>');/ e1 U) e& C8 W) Z
}
* h$ b1 g6 C2 a8 W
ws.onmessage = function (evt) {
A8 i) K! A9 ?0 l3 H8 M
$('#msg').append('<p>' + evt.data + '</p>');3 m% u" F5 G" P& H
}
3 F6 A- S3 U) `$ l* c) k1 p ?2 O
ws.onerror = function (evt) {/ l8 ?1 i8 ?) b# K% L9 \
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');6 z( X2 m8 J5 I% o9 {% \
}" \8 _! ~1 \( A7 j
ws.onclose = function () {, M/ w7 a' W) s* x9 j) q
$('#msg').append('<p>已经关闭</p>');
: P$ N+ [2 {! X( x; v- w6 _
}
6 f# F) t, t2 A) ?, Z
});" U/ ?5 ?1 @% L O% A
5 f! l' K# N( c# A4 ?" n
$('#close').click(function () {
" u( d& ]. u/ W# l
ws.close();
6 j) T6 X/ A8 f6 R2 b
});
$ O2 |/ V7 b; V# V
L/ A0 N: L, e
$('#send').click(function () {! j8 ?3 w- D, \# h) z
if (ws.readyState == WebSocket.OPEN) {+ Y' N& m2 C* t' t
ws.send($("#to").val() + "|" + $('#content').val());
' B, L6 B" r' M% ?* r, g5 _8 Y
}+ \) w5 k/ K _6 n( E% I0 N
else {9 \; }4 l/ i! H7 X3 t" ~
$('#tips').text('连接已经关闭');
8 ?1 d& c4 `- K/ _
}
1 Z, Y0 p% O( ? ?1 ?0 x6 A: I1 D
}); `; _4 I* H: d' N* Q
, r+ x( n: |! |. |' Q8 v% d
});
# A+ f( A) G# U" n O, ?- s/ e. F
</script>* h- o/ l5 R+ o2 J1 n2 f5 l: _$ w4 K
</head>
( P8 G% }. g+ A# F7 G' }' ]2 d
<body>
4 T8 s2 f9 E1 s8 t- G5 Y4 F" a
<div>5 F t/ \' J$ y- \( k, h1 i4 I7 Y
<input id="user" type="text" />
& @ N% r% M, H
<input id="conn" type="button" value="连接" />
# P2 h3 h; j/ w$ }6 l, a$ p( |
<input id="close" type="button" value="关闭"/><br />* n+ Q) B- z, d/ }8 ~1 w/ _) X- D
<span id="tips"></span>
+ y9 V% [8 k2 X5 ^9 N
<input id="content" type="text" />& s" c& U* w% V6 d8 x. T
<input id="send" type="button" value="发送"/><br />5 T0 I' {" e4 U
<input id="to" type="text" />目的用户5 P/ f+ ~. J4 v2 B
<div id="msg">
. x9 o- h, i* w8 S0 Q6 Y
</div>
3 B4 T, d$ p$ g$ y
</div>
2 a* q3 [2 v1 R0 v
</body>- l) W( D( x3 E7 Y4 v8 v
</html>

复制代码

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

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

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

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

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