在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># ^2 L$ p/ J! G8 c. G, Z; ~0 x. I
<html xmlns="http://www.w3.org/1999/xhtml">
( b5 Z) V" J M) R( V4 Q9 A9 o7 j; p
<head>; e9 N* H2 e+ U/ g7 `
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
G+ T* K( t: s
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>' u) k3 r; \- Z1 w) K
<title></title>
4 G& C+ K7 }+ r0 ~8 y
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>% w8 S* h; f; v8 a2 }1 r0 X
<script>
& K2 o, ~ |6 s! b
var ws; W" I W' t3 e0 P4 r v7 s8 Q7 K! G
$().ready(function () {
( A: h- e2 P M; F
$('#conn').click(function () {
$ P: O! K4 g0 o+ C
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
9 ]8 t% y8 x% U
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());% Y5 ~# m5 P' w( @9 P1 c& M, i
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
. x. w/ u b% `
//var host = "ws://192.168.85.128:8085/api/WSChat";7 B+ ^& B* N5 D, w- t% [( d
//webSocket = new WebSocket(host);
) G5 j5 ]0 x& j0 ?. \
. p4 ^( C# s4 T# U6 r
$('#msg').append('<p>正在连接</p>');0 O" ~% P, @+ N4 x
' i/ F- Z; O9 W) k3 }
ws.onopen = function () {: [9 a4 Q0 b; O3 c) |
$('#msg').append('<p>已经连接</p>');- _; B! w( E8 E( T; ?7 E6 y0 L. b" C
}6 I5 T D0 j% X( M+ C( `
ws.onmessage = function (evt) {* X! m _$ q, ?0 E, ^4 p! {+ T9 d/ l
$('#msg').append('<p>' + evt.data + '</p>');
$ G) o' W, ^: d$ {# [4 N" D
}
; K) J3 ]- r9 d9 |; L+ m
ws.onerror = function (evt) {4 H% Z6 }4 f- I6 t
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
# A* S: `0 v2 r& J7 V
}3 R: p& N6 H7 r* m* x
ws.onclose = function () {- O5 E, y/ V% m$ s( A" c7 T- u
$('#msg').append('<p>已经关闭</p>');
& b; N1 S; X3 h3 I q
}
8 M( \4 Z v3 x ]9 p
});
. g2 ?! ?- B. k, x6 Y4 q' l. p
8 j2 V& W7 d2 a' X
$('#close').click(function () {
1 Y2 G' M: }# a$ I
ws.close();
- l. @( x5 |0 @7 B% M) g2 F
});
' q( T! g7 ]5 v3 H% Z
* Y/ U/ P! p' M" E5 G
$('#send').click(function () {& G8 M( v5 D2 B
if (ws.readyState == WebSocket.OPEN) {
! k7 R; R# v- A2 x2 c
ws.send($("#to").val() + "|" + $('#content').val());' p: `8 O `' Q3 t' N
}2 y/ D! i7 Q7 X R
else {
. l1 F# m l- A3 A
$('#tips').text('连接已经关闭');
: Y/ ?9 Z- Z; d1 I7 |4 O$ d, U
}
& H/ Z; P* b- Z9 @4 S& f; e
});
5 @0 h f/ z6 u# n( b. ]) u5 m0 y
! l" O, x/ P* `) g
});
3 t4 h5 x. B5 u! _/ j* o* }8 I
</script>' P# o3 o& N8 Q' a. a7 u5 g
</head>
- }* @. x) W( I5 f8 ~9 o7 C
<body># T6 i# Y. e, l* {- J
<div>
4 ]4 F. A6 h6 |6 X! H1 R2 {( e) t
<input id="user" type="text" />/ }3 P2 v6 @" c2 j1 d8 \" i5 ~
<input id="conn" type="button" value="连接" />
. S+ u0 x u$ `5 P: Q
<input id="close" type="button" value="关闭"/><br />
; c: C% q$ T$ X# e
<span id="tips"></span>: T# q: o* G: j+ A
<input id="content" type="text" />
' z6 J. }3 Z. U% A
<input id="send" type="button" value="发送"/><br />) h$ J: q+ p( {4 k4 _7 [8 r) U& T% x
<input id="to" type="text" />目的用户# d- I% ~2 t3 Z. Y
<div id="msg">
) L0 i5 L' }# o* Q6 o
</div>
/ v1 G7 L4 _+ g6 O( }' z0 B- P
</div>
6 X4 Z, x6 I r ^- T' p
</body>* y$ O4 i s6 y
</html>

复制代码

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

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

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

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

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

浏览过的版块