在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>0 Y& M7 }8 i$ w7 d& m7 d$ h
<html xmlns="http://www.w3.org/1999/xhtml">
5 A6 h) P. R1 `5 W$ ]
<head>
) b* G) b$ s) m
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>) a5 [* ?3 N7 K; {2 R
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>$ z7 p! m8 }: R8 t. Y8 c' W7 N" L
<title></title>
m$ m! \5 b9 L2 w i! ?
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
: u6 Z( Z' S- Y5 f$ H! e
<script># H. L9 ]5 S$ s7 t U# _
var ws;
( ?# b0 }1 |0 ^
$().ready(function () {
# f5 P7 o3 S- s9 h! J; S2 V* I
$('#conn').click(function () {% B/ h7 b% ?: _: \; G! ^
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());" W2 F8 I6 |' ^. X5 \
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());# D2 S- v0 M' \
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
' v8 {- l# a/ `$ m0 F {
//var host = "ws://192.168.85.128:8085/api/WSChat";
g! t; t R0 b/ }
//webSocket = new WebSocket(host);: g7 d+ O/ M8 j. i5 x0 h
2 |# {! z; ` u. v8 {
$('#msg').append('<p>正在连接</p>');- g5 O* y; h* n5 K% g8 z
+ {! U+ ~0 ?" T3 H; l4 A
ws.onopen = function () {4 H9 o4 p0 q0 Q
$('#msg').append('<p>已经连接</p>');( r1 @+ Y+ P; q) Q4 Y
}% U! L2 X4 y/ {) F
ws.onmessage = function (evt) {, \& i6 _) F2 R! W# H+ t
$('#msg').append('<p>' + evt.data + '</p>');& n! ~4 W# D' c* }& A" H8 u4 n
}
8 Y) z5 @. S" Q5 i! B3 P5 M
ws.onerror = function (evt) {. Q |) K3 C# H; p4 V: m
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
' {6 p% a5 G9 b3 `4 l: P, t
}. c+ T$ V7 X# C# R. q
ws.onclose = function () {
. O2 k6 c' ~8 B9 d8 u) P w
$('#msg').append('<p>已经关闭</p>');
/ s4 ]/ F* @ U) ?
}
2 u5 K4 c5 l7 `! @$ O, |' N/ S
});
) F/ a9 D1 o/ `6 ~. w
; _) L. z" N' S. X2 p
$('#close').click(function () {
1 _( l1 c. u- e8 ~2 K% A1 Z
ws.close(); J8 [* O. k; \6 o; v6 ^
});
$ B6 h' ~; k) {/ @3 v
4 O/ N/ Q$ W+ h- z
$('#send').click(function () {
( Q$ L' }9 C/ @1 @* V: F: |
if (ws.readyState == WebSocket.OPEN) {
( ^, }% G: w6 ?% {* o
ws.send($("#to").val() + "|" + $('#content').val());6 T, [4 C$ a, k) w. n- t8 h4 k
}
6 |8 B* z- K3 u8 v9 `
else {
6 E0 p. q$ i! y% L7 x$ m; \
$('#tips').text('连接已经关闭');2 R* ?" n' Z, m+ Z
}
. }! }* S v( K
});$ u2 G. J( c1 p- |
4 ]6 B) |& D. p4 c, o0 T/ ?
});2 s7 I, K8 H) R# Y/ w
</script>! v- q. b1 y0 L( y2 e
</head>
+ A, C, Z# y1 }3 u5 Z
<body>6 G% H4 |. O8 U W
<div>; g6 H5 x5 q" Q/ I4 b
<input id="user" type="text" />7 G; F& U1 l7 V- g' i9 I3 W
<input id="conn" type="button" value="连接" />* y& n7 J& R3 \- c
<input id="close" type="button" value="关闭"/><br />
3 I C3 t7 p) X4 l( K" x U
<span id="tips"></span>
) V- Z2 ?7 z0 e# \* x
<input id="content" type="text" />
8 e9 R1 n/ d& p4 Q
<input id="send" type="button" value="发送"/><br />* A) c7 A! U W8 H! E. R) d8 t
<input id="to" type="text" />目的用户
$ B; e- S0 ~1 Q8 X) J
<div id="msg">9 h5 Q6 V) j- n5 O; N* x7 z
</div>% q; W! V- k4 ]$ M1 |- _7 U
</div>
% e8 T3 v g# v7 k7 v
</body>
6 W+ |# A+ s1 h* H
</html>

复制代码

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

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

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

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

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