在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>- T1 a; _2 d* x
<html xmlns="http://www.w3.org/1999/xhtml">
8 O2 B) {# R8 q4 A
<head>
- X8 S% e C) } e( z; C
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>& ^. C" e$ J0 E( A
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
# c* z9 V; v6 {+ i
<title></title>
& M% h. w) W% e$ O2 ^. S5 G1 @* i* B4 V
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
' g$ @' J( C3 c
<script>/ ^/ G7 F1 \9 D# ?
var ws;# y$ u+ G% V( t
$().ready(function () {
/ H: r2 f' i2 e
$('#conn').click(function () {2 D4 ?, L( M1 I$ Z
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());. {/ O$ S7 Z1 z+ ~/ [; d# G2 A2 a( ^
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());" q" R- q; K q. w
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();1 Q0 V1 g0 O8 j' U$ _; r( l
//var host = "ws://192.168.85.128:8085/api/WSChat";
8 V9 }+ X* Y9 x( L
//webSocket = new WebSocket(host);" w$ b3 I1 q. \& ^, R: f! q
( P5 W9 K8 J3 P" l, k
$('#msg').append('<p>正在连接</p>');$ p. p7 t9 E- w, v& [
( g' |& v1 S8 J) d" }
ws.onopen = function () {
+ p' V* |0 [+ n& D) c$ @+ ~
$('#msg').append('<p>已经连接</p>');5 @: f4 x8 c5 y/ n/ O. k% A7 q0 l7 g
}
' [4 ~" p9 M8 v& r& H; ^& t
ws.onmessage = function (evt) {3 t8 W. ^: g5 D
$('#msg').append('<p>' + evt.data + '</p>');, p3 z5 o. A' _, t L. j& B
}
- ^+ Y5 S* Z g/ ^7 G! i8 D/ o
ws.onerror = function (evt) {
2 b8 }8 @, r2 R
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
9 s9 |5 _* X& `" D! z, k( p2 U
}1 f' e- _! [( C+ c. G; {% g# e
ws.onclose = function () {
* O# G! y) w! y2 n) r# R" m, k# Q
$('#msg').append('<p>已经关闭</p>');2 z* c r9 J+ k3 |( w
}
5 R. ?8 m, a+ L2 N2 ^9 V' L7 k
});) z5 g1 j6 {5 Z+ ^$ M
k- J( n. ]0 H
$('#close').click(function () {
) A+ @! j8 @. ], o2 ]4 [6 j- ]
ws.close();% C! _& [ w4 |( O
});/ ?. _* S p! a
7 \( a7 u0 |. m
$('#send').click(function () {
/ Q. d- l! D! r
if (ws.readyState == WebSocket.OPEN) {
* l- C o$ c0 u
ws.send($("#to").val() + "|" + $('#content').val());* \' K1 u" Q* j; P
}
. y6 D0 X% P; I" K
else {2 ^' b x6 ] p* s# \3 |2 S
$('#tips').text('连接已经关闭');$ b: `/ E! @- Z6 {
}
; V! M; F* k" A: q' T! r* Z$ f
});
1 ^, _" s2 c; p
$ _( y$ Q: ], y0 j# P. |: h6 a" Y F
});
- f' e" y! U9 U% W
</script>0 I8 z1 K8 i, g7 M9 `
</head>- b& m( v( \& V1 w5 v1 B
<body>2 ]2 J6 r0 U6 f6 K5 Z) ~, D
<div>
; z+ r ]3 w4 X8 k/ w' O9 F
<input id="user" type="text" />1 Y* b9 D5 U8 i' _, @0 P7 C) S2 p
<input id="conn" type="button" value="连接" />
/ P6 U V8 F4 w7 A
<input id="close" type="button" value="关闭"/><br />* B; u6 @( l# S7 e) K! F
<span id="tips"></span># n/ G f# u* w3 F
<input id="content" type="text" />2 |1 f. }/ K5 q4 K& O2 h
<input id="send" type="button" value="发送"/><br />
% Q' _2 |/ w5 U3 S& D
<input id="to" type="text" />目的用户4 x s; Y7 P) D" y9 U- n
<div id="msg">
) q6 B- J- O: Y6 G. }6 b# G
</div>
# d7 z8 n9 t0 H
</div>
: b, W' F9 k2 O6 b/ o" n2 i6 G/ }
</body>! v/ d% \1 o! E0 `5 z
</html>

复制代码

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

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

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

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

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