在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>
<html xmlns="http://www.w3.org/1999/xhtml">
, v" }& \9 m4 T! J/ k. N1 i# }
<head>
5 j3 u" n- S* T) u* e0 Y2 O9 y& l# X2 p
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>/ Y+ T" m6 w" v
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
. T6 X8 P1 E3 i
<title></title>
" I- Q) y) D- l- {" Z$ J/ T& p
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
$ Z( C, q4 p2 n% f9 ~: J0 n7 i
<script>! g! v. T; f8 A: f* l
var ws;, c' f! Q Q+ K0 g" y1 z s
$().ready(function () {
8 R8 N+ W+ f, @! Y; Q/ \3 E
$('#conn').click(function () {
8 E1 z% O# i$ z6 d) L% }+ v# g5 I2 m
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());, A+ v# B& V r* q
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());3 g+ h- Y+ O) I' i/ d- F
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();# ?3 |) O% _ d. Y$ W2 S
//var host = "ws://192.168.85.128:8085/api/WSChat";4 _8 [1 Q4 g- E* z2 O m ]
//webSocket = new WebSocket(host);" f) u' \. G+ Y
4 p1 ~, W7 z% q' `% m% ~' I) ~' |
$('#msg').append('<p>正在连接</p>');; n1 c4 K' J j
# P) w( E5 g8 [8 z H# z
ws.onopen = function () {
* @9 w% f+ R1 e1 X3 e" x n
$('#msg').append('<p>已经连接</p>');5 d7 M8 H8 K! k: ]: p
}9 }7 ~1 k# E- P
ws.onmessage = function (evt) {
- b. K* X s9 h( ]. C5 s& L
$('#msg').append('<p>' + evt.data + '</p>');
6 Q( c2 {- J8 n
}+ R3 |" X' ^2 g8 ]! z
ws.onerror = function (evt) {% G) Z" f, N- I* C
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');% L& {& v/ u, \6 M* }6 r$ f
}9 N0 b* v8 v4 o2 s
ws.onclose = function () {
6 n* P9 K# D! e6 S
$('#msg').append('<p>已经关闭</p>');
! m3 y$ Y0 K2 K1 h) G* ?- G8 [3 R
}/ z" A2 f# f: u6 u1 ]3 L# |
});
, G) \+ P f0 Y8 N
+ W7 b/ @# A3 P8 }' z
$('#close').click(function () {
% |. c" ^4 P/ I* x, [, Q: W
ws.close();
6 ?' J* H+ K( [1 F
});
: G4 O! Q5 S2 d9 k* a- I$ w
. ~: v: c' n# v4 E5 |: h
$('#send').click(function () {" L: B2 a h9 P5 j0 _" V
if (ws.readyState == WebSocket.OPEN) {( Z p1 z& i/ D! k& M2 s+ H, Y
ws.send($("#to").val() + "|" + $('#content').val());) b( K4 y) H; b4 W# K# h" m
}
4 d, y9 ^* i$ p, R$ ?. C, q7 }9 l
else {6 e0 g- u# e: E' e5 p: [+ P- C
$('#tips').text('连接已经关闭');6 e5 s6 u } E7 d7 @+ g( o
}! L! M6 ^! e" o4 ?8 p4 g
});6 e! K, E6 ]4 U$ W, M( p; q; q" L
" ?" l- _' U5 \$ N4 U2 v# f
});
* f, j3 M* p# n3 J
</script>
! p; e" P8 ?: ]1 q; T2 j0 _* |
</head>
# q- z5 `* g( P( ^1 r4 ^, q
<body>
% w8 z' d2 V: T: z8 |. J8 }5 y0 p
<div>
6 _* P. Q9 u9 E
<input id="user" type="text" />
' {% h& l/ I: o1 W" O* v
<input id="conn" type="button" value="连接" />6 B6 l2 B Y3 g' _$ ?
<input id="close" type="button" value="关闭"/><br />
8 n4 b% u3 ?5 O
<span id="tips"></span>) ?7 K' b5 b5 S7 c; J: Q
<input id="content" type="text" />9 g8 I' r' c6 _& m# q" u
<input id="send" type="button" value="发送"/><br />
4 w4 k/ F; n, C2 E) k6 N
<input id="to" type="text" />目的用户
4 h9 d5 F1 k& T/ o8 c
<div id="msg">
6 T$ W4 l3 w7 \, K- `
</div># k3 y% m0 o- _' y3 X. y8 `- ^
</div>; b( P9 l, x! m1 a' M: w8 ]; k/ f; f
</body>
2 w, x1 I: P$ @5 [/ g7 j+ O1 @
</html>

复制代码

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

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

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

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

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