在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>
- r( P, V3 N; |4 q: |
<html xmlns="http://www.w3.org/1999/xhtml">
# ^0 x" J- M" r
<head>7 b: y8 O: `3 L6 b: d; L5 _6 Z! X; u
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
1 P+ l" `# i' {8 ?7 ~% `( |% N$ ~
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>2 R; p: b+ F. X6 v g6 _8 \
<title></title>6 v) U$ a- S! q2 G }
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
8 P" Z& c* F& I3 r1 H& ~& Q
<script>
& W" o' ^$ k8 X7 D
var ws;
. u8 L( u6 X7 G+ @
$().ready(function () {
& k( @" p: V9 i' u5 e. U4 s5 j
$('#conn').click(function () {
j4 x1 W7 L/ E
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());% }* L2 z& a: D: E* D7 {$ a
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());" W4 b& g. X. t, L0 w
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();) o% h& P# ?3 L1 a, f3 k7 \9 z2 m( Z
//var host = "ws://192.168.85.128:8085/api/WSChat";' }5 \/ w0 H/ ]' |6 s$ W; h
//webSocket = new WebSocket(host);
t9 g( M: @& v# Z& z% L
: w5 D4 O# S" t; C
$('#msg').append('<p>正在连接</p>');
9 `7 Y' d/ O0 k/ }4 X0 j7 x
4 y2 P% l% s$ A0 P" X; u
ws.onopen = function () {, D9 a$ O& z3 S0 K
$('#msg').append('<p>已经连接</p>');' h' ]8 P- E1 u5 w, C( |
}
9 h# P# Q2 |2 w+ l6 q" N% J/ g5 L
ws.onmessage = function (evt) {3 `: }2 P& h# |2 C/ R. q
$('#msg').append('<p>' + evt.data + '</p>');& H3 P& T: Y: @0 M* S0 H
}2 @3 U) r) E5 O8 [8 Q1 B
ws.onerror = function (evt) {
( N5 D: B8 B. X+ u: o/ T* s
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');1 p9 ?" W+ I7 R: V# M( w% M4 k
}
; ?( J" c0 ]6 d4 b$ j. I# t5 X
ws.onclose = function () {) u0 ]1 q, ]4 z3 ~# s: u% Y$ J
$('#msg').append('<p>已经关闭</p>');/ J6 G# c7 h; d) q" |
}
' w7 q: S; ^" M3 |- k3 ^, G$ M
});
. B( i6 r1 x* n5 \
! n2 J3 ]2 W- B9 }. i1 ], S9 f
$('#close').click(function () {0 F5 X: g- H3 c( V& [
ws.close();8 c8 [7 p" h3 g5 T, m/ s
});0 ~& [( Q" U+ @7 D8 Y r
( u6 {% m" }2 N) U
$('#send').click(function () {
, x7 z4 y- I/ s& a: r% E8 f4 F0 ~. V. W
if (ws.readyState == WebSocket.OPEN) {9 E# ?8 B6 C; V1 I9 ]) u
ws.send($("#to").val() + "|" + $('#content').val());
* D. R# X3 ]) a
}
( n( m. a; V; {+ \( ~ K
else {
7 j5 Q- ^8 N n" I
$('#tips').text('连接已经关闭');+ f" h# P+ q/ p( Y" O, f
}
1 t1 ~ A0 G, U0 S. h/ a" f2 V
});
: w( c7 }# W+ |
/ a! T: A, Q: V, m; {* ~9 T( D
});
3 {2 {' U3 L5 }: N" ~
</script>
/ G6 k! u' Q8 F5 N/ i6 U
</head>6 b0 L8 {) K! u/ q5 `1 Q" M
<body>
& d7 c3 Q* A( N/ H) S$ f
<div>
& N6 C2 \0 h, d3 ]3 x
<input id="user" type="text" />$ K6 o9 R# X" V) E, \- O
<input id="conn" type="button" value="连接" />& g9 h7 \7 E: H' \6 a0 U
<input id="close" type="button" value="关闭"/><br />
) y# T# `2 W/ F) O! U
<span id="tips"></span>
8 _. b+ l, X) }/ G$ `3 D- {; M
<input id="content" type="text" /> R- U4 \8 k" H. Y/ @6 Q" ?/ P# H
<input id="send" type="button" value="发送"/><br />
5 z' F' s+ m6 j! D0 R- [
<input id="to" type="text" />目的用户
, j0 s, c5 U0 `8 l: m, y9 G& ^
<div id="msg">
7 y0 K, R0 I2 Y% ]1 H
</div>
/ z4 E8 ] c4 F9 M7 r' n
</div>
! {" g* |8 J5 m) ?. Y b, t; S1 G
</body>
6 m( b3 g% L5 f$ K8 p, F2 m
</html>

复制代码

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

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

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

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

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