使用socket.io实现简单的聊天功能

Socket.io实际上是WebSocket的父集,Socket.io封装了WebSocket和轮询等方法

首先得在你的项目中安装socket.io

$ npm install socket.io

服务端代码:

var app=require(‘http‘).createServer()
var io=require(‘socket.io‘)(app)
var PORT =5555;
var clientCount=0;

app.listen(PORT)

io.on(‘connection‘,function(socket){
    clientCount++
    socket.nickname=‘user‘+clientCount
    io.emit(‘enter‘,socket.nickname+‘ comes in‘)

    socket.on(‘message‘,function(str){
        io.emit(‘message‘,socket.nickname+‘ says: ‘+str)
    })

    socket.on(‘disconnect‘,function(){
        io.emit(‘leave‘,socket.nickname+‘ left‘)
    })
})

客户端代码:

<!DOCTYPE html>
<html>
<head>
    <mate charset=‘utf-8‘ />
    <title>websocket</title>
    <script src="socket.io.js"></script>
</head>
<body>

    <h1>chat room</h1>
    <input type="text" id=‘sendtxt‘ />
    <button id=‘sendbtn‘>发送</button>
    <div id="recv"></div>
    <script type="text/javascript">
        var socket=io("ws://localhost:5555/");

        function showMessage(str,type){
            var div=document.createElement(‘div‘);
            div.innerHTML=str;
            if(type==‘enter‘){
                div.style.color=‘blue‘;
            }else if(type==‘leave‘){
                div.style.color=‘red‘
            }
            document.body.appendChild(div);
        }

        document.getElementById(‘sendbtn‘).onclick=function(){
            var txt=document.getElementById("sendtxt").value;
            if(txt){
                socket.emit(‘message‘,txt);
            }
        }

        socket.on(‘enter‘,function(data){
            showMessage(data,‘enter‘)
        })

        socket.on(‘message‘,function(data){
            showMessage(data,‘message‘)
        })

        socket.on(‘leave‘,function(data){
            showMessage(data,‘leave‘)
        })

    </script>
</body>
</html>

来自慕课网课程:

https://www.imooc.com/learn/861

原文地址:https://www.cnblogs.com/qiufang/p/8610438.html

时间: 2024-08-26 04:19:08

使用socket.io实现简单的聊天功能的相关文章

使用node.js和socket.io实现多人聊天室

刚学node.js,想着做点东西练练手.网上的东西多而杂,走了不少弯路,花了一天时间在调代码上.参考网上的一篇文章,重写了部分代码,原来的是基于基于node-websocket-server框架的,我没用框架,单单是socket.io. 一.基本功能 1.用户随意输入一个昵称即可登录2.登录成功后1) 对正在登录用户来说,罗列所有在线用户列表,罗列最近的历史聊天记录2) 对已登录的用户来说,通知有新用户进入房间,更新在线用户列表3.退出登录1)支持直接退出2) 当有用户退出,其他所有在线用户会收

Node.js websocket 使用 socket.io库实现实时聊天室

认识websocket WebSocket protocol 是HTML5一种新的协议.它实现了浏览器与服务器全双工通信(full-duple).一开始的握手需要借助HTTP请求完成. 其实websocket 并不是很依赖Http协议,它也拥有自己的一套协议机制,但在这里我们需要利用的socket.io 需要依赖到http . 之前用java jsp写过一个聊天,其实实现逻辑并不难,只是大部分时间都用在UI的设计上,其实现原理就是一个基于websocket的通信,要想做一个好的聊天室,我觉得大部

简单的聊天功能

简单的聊天功能 可以查看附近的人,简单的本地聊天,简单的客户资料. 下载地址:http://www.devstore.cn/code/info/792.html 运行截图:  

H5+MUI+Node.js+Socket.io群组即时聊天+发送图片+图片压缩

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title

vue + socket.io实现一个简易聊天室

vue + vuex + elementUi + socket.io实现一个简易的在线聊天室,提高自己在对vue系列在项目中应用的深度.因为学会一个库或者框架容易,但要结合项目使用一个库或框架就不是那么容易了.功能虽然不多,但还是有收获.设计和实现思路较为拙劣,恳请各位大大指正. 可以达到的需求 能查看在线用户列表 能发送和接受消息 使用到的框架和库 socket.io做为实时通讯基础 vuex/vue:客户端Ui层使用 Element-ui:客户端Ui组件 类文件关系图 服务端: 客户端: 服

socket.io入门,简易聊天室

介绍 通常我们web使用的是http协议,但是 HTTP 协议有一个缺陷:通信只能由客户端发起. 所以我们需要一个可以由服务端主动发出的协议,即WebSocket. WebSocket是HTML5新增的一种通信协议,其特点是服务端可以主动向客户端推送信息,客户端也可以主动向服务端发送信息,是真正的双向平等对话,属于服务器推送技术的一种. Socket.IO 是一个基于 Node.js 的实时应用程序框架,在即时通讯.通知与消息推送,实时分析等场景中有较为广泛的应用. socket.io 包含两个

基于Node.js + socket.io实现WebSocket的聊天DEMO

原文摘自我的前端博客,欢迎大家来访问 http://hacke2.github.io 简介 最近看Node.js和HTML5,练手了一个简易版的聊天DEMO,娱乐一下 为什么需要socket.io? node.js提供了高效的服务端运行环境,但是由于浏览器端对HTML5的支持不一, 为了兼容所有浏览器,提供卓越的实时的用户体验,并且为程序员提供客户端与服务端一致的编程体验, 于是socket.io诞生. 简答来说socket.io具体以下特点: 1.socket.io设计的目标是支持任何的浏览器

android中实现简单的聊天功能

这个例子只是简单的实现了单机版的聊天功能,自己跟自己聊,啦啦~~ 主要还是展示RecyclerView控件的使用吧~ 参考我之前写的文章: android中RecyclerView控件的使用 android中使用Nine-Patch图片 1.先添加一个关于聊天内容的Chat.java类: package com.example.chenrui.common; public class Chat { private String targetUser; private String content

nodejs 实例 使用 Express + Socket.IO 搭建多人聊天室

https://cnodejs.org/topic/51d51cd8d44cbfa3047926ba 作者 nswbmw 详细内容大家可以看这个. 由于时间久远,很多代码都过期了.我刚更新了app.js代码. /** * Module dependencies. */ var express = require('express') , http = require('http') , path = require('path'); var app = express(); // all env