在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>
, l, e0 I, k4 m1 x
<html xmlns="http://www.w3.org/1999/xhtml">' z: J$ z5 U# |! x9 l
<head>
}$ j/ N5 y% C K: D, r/ x; Q
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>+ D2 {- [5 \& H& L9 a
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
8 K1 v: R, i3 n. i: s
<title></title>1 H* D+ I" K/ v& ]& D
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
: U# M: n7 c9 ?4 J+ c6 P# F8 j
<script>8 b. s* k ]/ Y0 F
var ws;0 j! B0 u$ q& ^; d
$().ready(function () {9 ]0 b, N- { U, A( F) {" t4 }
$('#conn').click(function () {* ^# b3 k: ?' N7 Z8 y3 g6 h+ ~
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
2 U3 o5 K* p/ `4 M, Q' w
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
' J7 }% E7 n/ P- e7 E8 ^! y9 C, }
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();* s' x% \" x9 ]" ?# u9 u( r
//var host = "ws://192.168.85.128:8085/api/WSChat";* V4 |- S1 M- f& ~
//webSocket = new WebSocket(host);5 a- _0 k% g4 I- ^5 {( u: c
" }/ S1 m5 v7 D1 S# L4 G
$('#msg').append('<p>正在连接</p>');4 [9 N4 T1 t9 y, l
( e* U& Y& g+ [2 e
ws.onopen = function () {
" }, t0 A: p/ C' L5 `2 h
$('#msg').append('<p>已经连接</p>');7 U/ Z! M" p$ L
}# ]& r: |9 e0 ?4 |; T% H4 {
ws.onmessage = function (evt) {
1 D5 {3 n+ n" l: C/ `" l2 p& t
$('#msg').append('<p>' + evt.data + '</p>');
1 h7 z0 b6 O/ N
}
9 m. V1 R( U7 U4 Q
ws.onerror = function (evt) {! F; `+ r% T* k* J9 t' {/ A
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');$ `$ i6 S+ j( ~( f u
}# W. u2 ~& e6 ^9 |8 F: ?' }
ws.onclose = function () {
. v. T. ]; I# E6 a" n) X9 b t+ s
$('#msg').append('<p>已经关闭</p>');
}
) A6 b* w. \: M" ?
});
2 R" b& B' l! |% v9 F
" F- m$ G2 c2 v
$('#close').click(function () {- w7 G% Y* W! o; w' c [$ L
ws.close();
" Y3 g1 c) {& K& \
});
( q9 _; ]( Y6 @7 T$ R
9 \3 G4 M5 C% g3 r$ W
$('#send').click(function () {: i3 o- H6 p; b+ v2 E- [* F% u
if (ws.readyState == WebSocket.OPEN) {
# D' \- H, x5 K) ]8 F2 W- ]% z
ws.send($("#to").val() + "|" + $('#content').val());
. L+ @( }' I4 ?3 x( k, G( M
}
6 A0 w4 [& o0 e6 h$ |+ M; j
else {
! Z1 I! a: w4 o
$('#tips').text('连接已经关闭');
: f, p* J! n2 `% f4 ~
}
$ N% s1 _$ U! v5 P1 }
});
, D% ~( e1 {5 Q& ?& T
: e) f0 Z" h: y5 Q( a* }/ y
});
1 C$ }1 n7 S4 h0 W" j# g" } j
</script>' B I7 L0 A7 _" o5 z. m
</head>
. n A; K9 p% X+ y- N
<body>& G" D: \+ D+ B
<div>* T6 H; T- D+ M
<input id="user" type="text" />" H2 L8 o6 j6 D2 q
<input id="conn" type="button" value="连接" />2 a' r& Y* F) m4 o
<input id="close" type="button" value="关闭"/><br />$ ~6 y( Y) g$ c( D
<span id="tips"></span>
/ v! N- T9 ~7 v7 ]. v! \ I# `' J
<input id="content" type="text" />0 c f; B: u/ {5 f/ S0 W+ l u
<input id="send" type="button" value="发送"/><br />- ~" Z4 ~1 @0 @4 p7 a
<input id="to" type="text" />目的用户
& j: U! o4 z. V. _/ q) ?
<div id="msg">
</div>$ R9 |% w0 V: Z5 Z
</div>
2 c; ]0 o/ j6 @; G3 T, [- [+ h. ^
</body>
7 X+ }4 P: ^# N- U ^2 i7 p
</html>

复制代码

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

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

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

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

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

浏览过的版块